React 路由跳转的几种方式及示例代码

最新推荐文章于 2025-08-25 19:37:21 发布

CodeRoarX

最新推荐文章于 2025-08-25 19:37:21 发布

阅读量958

点赞数

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端编程

本文链接：https://blog.youkuaiyun.com/CodeRoarX/article/details/133599250

编程专栏收录该内容

413 篇文章 ¥29.90 ¥99.00

订阅专栏

本文详细介绍了React中实现路由跳转的三种方式：1) 使用React Router的<Link>组件；2) 利用编程式导航，结合useHistory钩子；3) 使用<Redirect>组件进行重定向。通过这些方法，可以灵活地处理React应用中的页面导航和视图切换。

React 是一个流行的 JavaScript 库，用于构建用户界面。在 React 应用程序中，路由跳转是实现页面导航和视图切换的重要功能。本文将介绍 React 中常用的几种路由跳转方式，并提供相应的示例代码。

使用 React Router 的 <Link> 组件进行跳转：

React Router 是 React 社区中最受欢迎的路由库之一，它提供了一组用于处理路由的组件和工具。其中，<Link> 组件是用于在应用程序中创建链接并进行路由导航的常用组件。

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

function App() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>
    </div>
  );
}

了解本专栏