随着 Web 应用的发展，单页应用（Single Page Application，SPA）越来越受欢迎。SPA 应用有很多好处，比如用户体验好、性能高等等。但是，在 SPA 应用中，路由跳转是一个比较复杂的问题。为了解决这个问题，我们可以使用 React-Router 这个库。
React-Router 是一个基于 React 的路由库，它可以帮助我们管理应用程序的路由。React-Router 提供了很多功能，比如路由匹配、嵌套路由、路由传参等等。在本文中，我将介绍如何使用 React-Router 实现 SPA 应用中的路由跳转。
安装 React-Router
首先，我们需要安装 React-Router。可以使用 npm 或者 yarn 来安装 React-Router：
npm install react-router-dom
或者
yarn add react-router-dom
路由的基本概念
在 React-Router 中，路由是指 URL 和组件之间的映射关系。当用户访问某个 URL 时，React-Router 会根据 URL 匹配对应的组件，并将其渲染到页面上。
React-Router 中有两种类型的路由：
- 声明式路由（Declarative Routing）：使用组件来声明路由。
- 编程式路由（Programmatic Routing）：使用 JavaScript 来编写路由。
在本文中，我们将使用声明式路由来实现 SPA 应用中的路由跳转。
声明式路由
在 React-Router 中，声明式路由是指使用组件来声明路由。React-Router 提供了三种类型的组件来定义路由：
<BrowserRouter>：用于在 HTML5 history API 中使用全局路由。<HashRouter>：用于在 URL 中使用哈希路由。<MemoryRouter>：用于在内存中管理路由。
在本文中，我们将使用 <BrowserRouter> 组件来实现路由跳转。
路由配置
在 React-Router 中，路由配置是指将 URL 和组件之间的映射关系定义在一个配置文件中。可以将路由配置定义在一个 JavaScript 文件中，也可以将路由配置定义在一个 JSON 文件中。
下面是一个简单的路由配置示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ------ - ---- -------------------
------ ---- ---- --------------------
------ ----- ---- ---------------------
------ ------- ---- -----------------------
------ -------- ---- ------------------------
----- ------ - -
-
----- ----
---------- -----
------ -----
--
-
----- ---------
---------- ------
--
-
----- -----------
---------- --------
--
-
----- ----
---------- ---------
--
--
------ ------- -------- ----- -
------ -
--------
------------------- -- -
------ ---------------- ---------- --
---
---------
--
-在这个示例中，我们定义了四个路由，分别对应于 /、/about、/contact 和其他路由。
path：表示 URL 的路径。component：表示要渲染的组件。exact：表示是否精确匹配路由路径。
路由跳转
在 React-Router 中，路由跳转是指在应用程序中切换路由。React-Router 提供了两种方式来实现路由跳转：
<Link>：用于在应用程序中创建链接。history.push()：用于在 JavaScript 中编程式地跳转路由。
<Link>
<Link> 组件用于在应用程序中创建链接。当用户点击链接时，React-Router 会自动跳转到对应的路由。
下面是一个 <Link> 组件的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- -------------------
------ ------- -------- -------- -
------ -
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
----
----- ----------------------------
-----
-----
------
--
-在这个示例中，我们使用 <Link> 组件来创建三个链接，分别对应于 /、/about 和 /contact 路由。
history.push()
history.push() 方法用于在 JavaScript 中编程式地跳转路由。可以在组件中使用 useHistory 钩子来获取 history 对象。
下面是一个 history.push() 方法的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- -------------------
------ ------- -------- ------------- -
----- ------- - -------------
-------- ------------- -
---------------------------
-
------ ------- -------------------------------------
-在这个示例中，我们在组件中定义了一个 handleClick 函数，当用户点击按钮时，会调用 history.push('/dashboard') 方法来跳转路由。
总结
在本文中，我们介绍了如何使用 React-Router 实现 SPA 应用中的路由跳转。我们学习了声明式路由、路由配置和路由跳转等基本概念，并给出了示例代码。React-Router 是一个非常强大的路由库，它可以帮助我们更好地管理应用程序的路由。如果你想深入学习 React-Router，可以查看官方文档：https://reactrouter.com/web/guides/quick-start。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6585452cd2f5e1655dfee59f