react 路由跳转的7种方式实现

更新时间：2025年03月02日 08:29:15 作者：阿丽塔~

本文介绍了React中六种常见的路由跳转方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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 中已被移除。

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

到此这篇关于react 路由跳转的几种方式的文章就介绍到这了,更多相关react 路由跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React中的生命周期详解
这篇文章主要介绍了React中的生命周期，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2022-09-09
使用hooks写React组件需要注意的5个地方
这篇文章主要介绍了使用hooks写React组件需要注意的5个地方，帮助大家更好的理解和学习使用React组件，感兴趣的朋友可以了解下
2021-04-04
React DOM-diff 节点源码解析
这篇文章主要为大家介绍了React DOM-diff节点源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
详解如何使用React构建跑马灯组件
当你想到跑马灯时,往往会想到游乐园里那些充满活力的灯光和旋转的显示,带回童年的美好回忆,本文将和大家一起探索如何在 React 中构建一个引人入胜的跑马灯组件,需要的朋友可以参考下
2024-04-04
React三大属性之props的使用详解
这篇文章主要介绍了React三大属性之props的使用详解，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下
2021-04-04
React性能优化系列之减少props改变的实现方法
这篇文章主要介绍了React性能优化系列之减少props改变的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
React创建组件的三种方式及其区别是什么
在React中,创建组件的三种主要方式是函数式组件、类组件和使用React Hooks的函数式组件,本文就详细的介绍一下如何使用,感兴趣的可以了解一下
2023-08-08
如何创建自己的第一个React 页面
React是用于构建用户界面的JavaScript库，本文主要介绍了如何创建自己的第一个React页面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
react中useRef的应用使用详解
这篇文章主要介绍了react中useRef的应用使用详解的相关资料,需要的朋友可以参考下
2023-05-05
深入React 18源码useMemo useCallback memo用法及区别分析
这篇文章主要为大家介绍了React 18源码深入分析useMemo useCallback memo用法及区别，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04