React Router 中常用的方法总结

在 React 中使用 React Router (V5版)可以实现类似于 Vue Router 的路由跳转、获取参数和编程式导航、获取路由对象等功能。以下是一些常用的方法:

  1. 编程式导航 :您可以使用 useHistory 钩子进行编程式导航。以下是一个示例:
js 复制代码
import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      回到首页
    </button>
  );
}
  1. 重定向 :您可以使用 Redirect 组件将用户重定向到不同的页面。以下是一个示例:
js 复制代码
import { Redirect } from "react-router-dom";

function LoginPage() {
  // ... 登录逻辑

  return (
    <div>
      {isLoggedIn ? <Redirect to="/dashboard" /> : <LoginForm />}
    </div>
  );
}
  1. 前进或后退 :您可以使用 useHistory 钩子中的 goBackgoForward 函数实现前进和后退。以下是一个示例:
js 复制代码
import { useHistory } from "react-router-dom";

function BackButton() {
  let history = useHistory();

  function handleClick() {
    history.goBack();
  }

  return (
    <button type="button" onClick={handleClick}>
      后退
    </button>
  );
}

function ForwardButton() {
  let history = useHistory();

  function handleClick() {
    history.goForward();
  }

  return (
    <button type="button" onClick={handleClick}>
      前进
    </button>
  );
}
  1. 获取 URL 中的参数 :您可以使用 useParams 钩子获取 URL 中的参数。以下是一个示例:
js 复制代码
import { useParams } from "react-router-dom";

function UserDetails() {
  let { userId } = useParams();

  return (
    <div>
      <h1>User ID: {userId}</h1>
    </div>
  );
}
  1. 获取路由信息对象 :您可以使用 useRouteMatch 钩子获取有关路由的信息。以下是一个示例:
js 复制代码
import { useRouteMatch } from "react-router-dom";

function About() {
  let match = useRouteMatch();

  return (
    <div>
      <h1>About</h1>
      <p>You are now on the "About" page.</p>
      <p>The URL matched is {match.path}.</p>
    </div>
  );
}
  1. 嵌套路由 :您可以使用 Route 组件的 path 属性和 children 属性创建嵌套路由。以下是一个示例:
js 复制代码
import { Route, Switch } from "react-router-dom";

function App() {
  return (
    <Switch>
      <Route path="/admin" component={Admin}>
        <Route path="/admin/dashboard" component={Dashboard} />
        <Route path="/admin/settings" component={Settings} />
      </Route>
    </Switch>
  );
}
  1. 守卫路由 :您可以使用 Route 组件的 render 属性或 useEffect 钩子来实现路由守卫。以下是一个示例:
js 复制代码
import { Route, Redirect } from "react-router-dom";

function PrivateRoute({ component: Component, ...rest }) {
  const isAuthenticated = // ... 检查用户是否已登录

  return (
    <Route
      {...rest}
      render={props =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
}
相关推荐
十盒半价17 分钟前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
海底火旺20 分钟前
以一个简单的React应用理解数据绑定的重要性
前端·css·react.js
爱学习的茄子22 分钟前
React Hooks驱动的Todo应用:现代函数式组件开发实践与组件化架构深度解析
前端·react.js·面试
宇宙全栈Link23 分钟前
当 React 组件调用自定义 hooks,hooks 又调用其他 hooks 时,状态变化如何传播?
前端·javascript·react.js
归于尽25 分钟前
原生JS与React的事件差异
前端·javascript·react.js
伍哥的传说1 小时前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
G等你下课3 小时前
React 事件机制原理
前端·react.js
遂心_3 小时前
深入剖析React待办事项应用:Hooks、组件化与性能优化实战
前端·react.js·前端框架
小山不高3 小时前
react封装指令式组件
前端·react.js
爱学习的茄子3 小时前
深入解析React事件机制:从原生DOM到合成事件的演进
前端·react.js·面试