react 路由跳转的7种方式实现-牛翰网

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>;
}

特点：