React Router 是一个为 React 应用构建和管理路由的开源库，它可以让我们轻松地构建单页应用程序（Single Page Application，SPA），并且管理应用程序的路由与历史记录。在本文中，我们将详细介绍如何使用 React Router 构建 SPA 路由。
安装 React Router
首先，我们需要使用 npm 安装 React Router。在控制台中使用以下命令：
--- ------- ----------------
这将安装 react-router-dom 库并添加到我们的项目中。
配置路由
为了使用 React Router，我们需要将路由器（Router）包装在我们的组件中，可以使用三种不同类型的路由器来控制路由：BrowserRouter，HashRouter和MemoryRouter。BrowserRouter 和 HashRouter 都需要一个初始化路由路径，而 MemoryRouter 只是一个内存路由器。
------ ----- ---- --------
------ - ------------- -- ------- ----- - ---- -------------------
------ ---- ---- ---------
------ ----- ---- ----------
------ ------- ---- ------------
-------- ----- -
------ -
--------
------ -------- ----- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
---------
--
-
------ ------- ----在上面的示例中，我们使用 BrowserRouter 来包装我们的路由器，并设置了几个不同的 Route 组件来响应不同的 URL。
导航
在构建SPA应用时，导航是必不可少的。React Router 提供了多种类型的导航组件，让我们能够快速轻松地创建导航。这些组件包括 Link 和 NavLink。
------ ----- ---- --------
------ - ---- - ---- -------------------
-------- ------------ -
------ -
-----
----
--------- -----------------------
--------- -----------------------------
--------- ---------------------------------
-----
------
--
-
------ ------- -----------在上面的代码中，我们使用了 Link 组件来创建导航菜单。Link 组件会自动为我们生成一个正确的 href 属性，指向构建应用程序的基础 URL。
如果我们想要在当前URL等于该导航的URL时应用某些样式，可以使用 NavLink 组件。
------ ----- ---- --------
------ - ------- - ---- -------------------
-------- ------------ -
------ -
-----
----
------------ ----- ------ --------------------------------------------
------------ ----------- ---------------------------------------------
------------ ------------- -----------------------------------------------
-----
------
--
-
------ ------- -----------在上面的代码中，我们使用了 NavLink 组件，并传递了一个 activeClassName 属性来指定活动链接的样式。
参数
有时，在我们的路由中需要一些参数，例如，在 URL 中定义博客文章的 ID，以便在视图中渲染正确的博客文章。
React Router 提供了一个包含参数的 Route 组件，我们可以使用它来提取 URL 中的参数并在我们的组件中进行访问。
------ ----- ---- --------
------ - ------------- -- ------- ----- - ---- -------------------
------ ---- ---- ---------
------ ----- ---- ----------
------ ------- ---- ------------
------ -------- ---- -------------
-------- ----- -
------ -
--------
------ -------- ----- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
------ ---------------- -------------------- --
---------
--
-
------ ------- ----在上面的代码中，我们使用了 a 路由参数：id。在我们的 BlogPost 组件中，我们可以使用 props.match.params.id 访问 ID 参数。
------ ----- ---- --------
-------- --------------- -
------ -
-----
-------- ---- ----------------------------
------
--
-
------ ------- ---------重定向
我们有时需要在我们的路由中进行重定向，例如，在用户访问未登录的页面时，将他们重定向到登录页面。
React Router 提供了Redirect组件，我们可以使用它来执行重定向。
------ ------ - -------- - ---- --------
------ - ------------- -- ------- ------ -------- - ---- -------------------
------ ---- ---- ---------
------ ----- ---- ----------
------ ------- ---- ------------
------ ----- ---- ----------
-------- ----- -
----- ---------- ------------ - ----------------
------ -
--------
------ -------- ----- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
------ ------------- ---------- -- -
-------- - -
--------- ------ --
- - -
------ ----------- -- ------------------ --
-
-- --
---------
--
-
------ ------- ----在上面的代码中，我们定义了一个标志loggedIn以跟踪用户是否已登录。如果用户未登录，我们调用Login组件来呈现登录表单。如果用户已经登录，我们使用Redirect组件将它们重定向到主页。
结论
React Router 是构建和管理路由的一个非常流行的 JavaScript 库之一。在本文中，我们详细介绍了如何使用 React Router 来构建 SPA 路由，并且演示了如何使用常见的功能例如跳转、参数以及重定向。希望这篇文章能够帮助我们更好地使用 React Router 构建我们的应用程序。
示例代码：https://github.com/Hello-Krystal/react-router-demo
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6731b2020bc820c58239e86d