react 路由跳转的几种方式

在 React 中，路由跳转通常通过 react-router-dom（或类似的路由库）来实现。以下是几种常见的路由跳转方式：

1. 使用 <Link> 组件

<Link> 是最简单的路由跳转方式，它会生成一个 <a> 标签，点击后可以导航到指定的路由，而不会重新加载页面。

import { Link } from "react-router-dom";

function App() {
  return (
    <div>
      <h1>Home Page</h1>
      <Link to="/about">Go to About</Link>
    </div>
  );
}

特点：

• 适合用于页面级的导航。
• 不会触发页面重新加载，而是通过 React Router 的内部机制更新页面内容。

2. 使用 <NavLink> 组件

<NavLink> 是 <Link> 的一个变体，它会在当前路由匹配时自动添加一个样式类（如 active），非常适合用于导航栏。

import { NavLink } from "react-router-dom";

function App() {
  return (
    <nav>
      <NavLink to="/" exact activeClassName="active">
        Home
      </NavLink>
      <NavLink to="/about" activeClassName="active">
        About
      </NavLink>
    </nav>
  );
}

特点：

• 与 <Link> 类似，但提供了额外的样式控制。
• 适合用于导航栏或侧边栏。

3. 使用 useHistory 钩子（React Router v5）

在 React Router v5 中，useHistory 钩子可以用于编程式导航。它允许你在代码中控制路由跳转。

import { useHistory } from "react-router-dom";

function LoginButton() {
  const history = useHistory();

  const handleClick = () => {
    history.push("/dashboard");
  };

  return <button onClick={handleClick}>Login</button>;
}

特点：

• 适合在事件处理函数中进行路由跳转。
• 可以传递查询参数或状态。

4. 使用 useNavigate 钩子（React Router v6）

在 React Router v6 中，useHistory 被替换为 useNavigate，功能类似但更简洁。

import { useNavigate } from "react-router-dom";

function LoginButton() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate("/dashboard");
  };

  return <button onClick={handleClick}>Login</button>;
}

特点：

• 替代了 v5 中的 useHistory。
• 更简洁的 API 设计。

5. 使用 <Redirect> 组件（React Router v5）

<Redirect> 是一种在组件中实现路由跳转的方式，通常用于条件渲染。它会在渲染时直接跳转到指定路由。

import { Redirect } from "react-router-dom";

function PrivateRoute({ isLoggedIn }) {
  return isLoggedIn ? <Dashboard /> : <Redirect to="/login" />;
}

特点：

• 适合用于权限控制或条件跳转。
• 在 React Router v6 中，<Redirect> 被移除，推荐使用 navigate 或其他方式替代。

6. 使用 navigate 函数（React Router v6）

在 React Router v6 中，navigate 函数不仅可以用于编程式导航，还可以实现相对路径跳转。

import { useNavigate } from "react-router-dom";

function GoBackButton() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate(-1); // 返回上一页
  };

  return <button onClick={handleClick}>Go Back</button>;
}

特点：

• 支持相对路径跳转（如 navigate(-1) 返回上一页）。
• 更灵活的路由控制。

7. 使用 history 对象（自定义路由库）

如果你使用的是自定义路由库（如 history），可以通过 history.push 或 history.replace 方法实现跳转。

import { useHistory } from "history";

function LoginButton() {
  const history = useHistory();

  const handleClick = () => {
    history.push("/dashboard");
  };

  return <button onClick={handleClick}>Login</button>;
}

特点：

• 适合在不使用 React Router 的情况下实现路由跳转。
• 需要手动配置 history 对象。

总结

• <Link> 和 <NavLink>：适合页面级导航，简单易用。
• useNavigate 和 useHistory：适合编程式导航，适合在事件处理函数中使用。
• navigate 函数：适合更灵活的路由控制，支持相对路径。
• <Redirect>：适合条件跳转，但在 React Router v6 中已被移除。

根据你的具体需求选择合适的路由跳转方式即可。