React-router 是 React.js 官方提供的一个路由库，它可以帮助我们在 React 项目中实现页面跳转的功能。本文将详细介绍如何在 React 项目中使用 React-router 实现页面跳转，并提供示例代码。
安装与基本用法
首先，我们需要安装 React-router。可以使用 npm 或 yarn 进行安装：
npm install react-router-dom
或
yarn add react-router-dom
安装完成后，在项目中引入 React-router：
import { BrowserRouter as Router, Route } from 'react-router-dom';其中，BrowserRouter 是 React-router 中的一个路由器组件，它会根据当前浏览器的 URL 路径去匹配对应的组件进行渲染。Route 组件则是用来定义路由规则的，它可以指定一个路径和对应的组件。
接下来，我们可以在项目中定义路由规则了。例如，我们想要在项目中实现两个页面：首页和关于页面。我们可以这样定义路由规则：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------- ----- - ---- -------------------
------ ---- ---- ---------
------ ----- ---- ----------
-------- ----- -
------ -
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
---------
--
-
------ ------- ----上面的代码中，我们定义了两个路由规则，分别对应了首页和关于页面。exact 属性表示精确匹配，只有当路径完全匹配时才会渲染对应的组件。
接下来，我们需要在组件中实现页面跳转的功能。
页面跳转
React-router 提供了两种方式实现页面跳转：Link 和编程式导航。
Link
Link 组件可以将页面中的链接转换成路由链接，从而实现页面跳转。例如，我们在首页中添加一个链接到关于页面：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- -------------------
-------- ------ -
------ -
-----
-----------
----- ---------------------
------
--
-
------ ------- -----在上面的代码中，我们使用 Link 组件将“关于”链接转换成了路由链接，并指定了跳转的路径。
编程式导航
除了使用 Link 组件外，我们还可以使用编程式导航实现页面跳转。编程式导航是指在代码中通过编程的方式进行页面跳转。例如，我们可以在组件中添加一个按钮，点击后跳转到关于页面：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- -------------------
-------- ------ -
----- ------- - -------------
-------- ------------- -
-----------------------
-
------ -
-----
-----------
------- --------------------------------------
------
--
-
------ ------- -----在上面的代码中，我们使用 useHistory 钩子获取路由历史记录，并在点击按钮时调用 history.push 方法进行页面跳转。
总结
本文介绍了在 React 项目中使用 React-router 实现页面跳转的方法，并提供了示例代码。通过本文的学习，读者可以了解到 React-router 的基本用法和页面跳转的两种实现方式，对于 React 项目的开发有一定的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6557350ed2f5e1655d1a36fc