在开发一个 React 应用时，我们经常需要根据用户的交互行为进行页面间的跳转。React-Router 是一个流行的 React 路由库，它提供了一种简单且强大的方式来管理应用的不同路由。本文将介绍如何使用 React-Router 实现跳转到另一个路由，并提供代码示例和深入解释。
安装 React-Router
首先，我们需要安装 React-Router。可以使用 npm 或者 yarn 来安装：
--- ------- ---------------- - -- ---- --- ----------------
创建路由组件
在使用 React-Router 之前，我们需要创建路由组件。通常情况下，我们会在 App.js 文件中创建一个包含多个子路由的组件，然后在这个组件内部定义每个子路由对应的组件。以下是一个示例的路由组件：
------ - ------------- -- ------- ------- ----- - ---- -------------------
------ ---- ---- ---------
------ ----- ---- ----------
------ ------- ---- ------------
-------- ----- -
------ -
--------
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
--- ---- ---
---------
---------
--
-
------ ------- ----在上面的代码中，我们使用 BrowserRouter 作为路由器，使用 Switch 来匹配当前路径与子路由，并使用 Route 来指定每个子路由对应的组件。其中，exact 属性表示只有在路径完全匹配时才渲染该路由。
实现路由跳转
接下来，我们将介绍如何使用 React-Router 实现路由跳转。React-Router 提供了两种方式来实现路由跳转：使用 <Link> 组件或者编程式地使用 history.push() 方法。
使用 Link 组件
<Link> 组件是 React-Router 提供的一种声明式的跳转方式。它类似于 HTML 中的 <a> 标签，但是它可以自动更新 URL，并且不会重新加载整个页面。以下是一个使用 <Link> 组件的示例：
------ - ---- - ---- -------------------
-------- ------ -
------ -
-----
----------- -- --- ---- ---------
----- ----------------- ---- -- -- -- --- ----- -----------
------
--
-
------ ------- -----在上面的代码中，我们使用 <Link> 组件来实现从主页跳转到关于页面。当用户点击链接时，React-Router 会自动更新 URL，并且只渲染关于页面的组件。
使用 history.push()
history.push() 方法是编程式的跳转方式，它可以通过 JavaScript 代码来实现路由跳转。以下是一个使用 history.push() 方法的示例：
------ - ---------- - ---- -------------------
-------- ------ -
----- ------- - -------------
-------- ------------- -
-----------------------
-
------ -
-----
----------- -- --- ---- ---------
------- --------------------------- ---- -- -- -- --- ----- -------------
------
--
-
------ ------- -----在上面的代码中，我们使用 useHistory() 钩子来获取 history 对象，并在点击按钮时使用 history.push() 方法跳转到关于页面。
总结
React-Router 是一个功能强大且易于使用的 React 路由库。本文介绍了如何使用 React-Router 实现路由跳转，包括使用 <Link> 组件和编程式地使用 history.push() 方法。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30134