在 React 应用开发中，我们常常需要管理多个页面的路由，让用户能够在页面之间自由切换。React Router 是一个流行的路由库，它提供了丰富的功能，可以帮助我们实现复杂的路由管理。本文将介绍 React Router 的基本用法，并展示如何实现一个简单的多页面应用。
安装和导入
首先，我们需要安装 React Router。可以通过 npm 或者 yarn 安装：
npm install react-router-dom --save # 或者 yarn add react-router-dom
安装完成后，我们需要在应用中导入 React Router。通常情况下，我们会在根组件中导入并使用它：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------- ------- ----- - ---- -------------------
-------- ----- -
------ -
--------
--------
------ -------- ------
--------- --
--------
------ --------------
---------- --
--------
------ ----------------
------------ --
--------
---------
---------
--
-
------ ------- ----在上面的代码中，我们从 react-router-dom 包中导入了 BrowserRouter、Switch 和 Route。BrowserRouter 是一个 React 组件，它提供了浏览器路由机制的封装。在 BrowserRouter 内部，我们使用 Switch 来包裹多个 Route 组件，并为每个 Route 指定它所对应的路径和内容组件。
路径的匹配规则
React Router 中，路径使用类似于正则表达式的语法进行匹配。以下是一些常见的路径匹配规则：
/匹配网站的根路径。/home匹配路径为/home的页面。/users/:userId匹配路径为/users/123、/users/456等带有参数的路径。/users/:userId/posts/:postId匹配路径为/users/123/posts/456、/users/456/posts/789等带有多个参数的路径。
路径匹配规则中使用 : 来指定参数，参数名可以是任意名称。匹配到的参数可以通过 match 对象进行访问，如下所示：
-- -------------------- ---- -------
-------- ---------- -
----- - ------ - - ----------------------------------------------
------ -
-----
------ --------------- --- --------------------
------
--
-在上面的代码中，使用了 useRouteMatch 钩子函数来匹配路径，并从返回的 match 对象中获取路由参数。
使用 Link 连接不同的页面
在 React Router 中，使用 Link 组件来实现页面之间的跳转。比如下面的代码：
-- -------------------- ---- -------
------ - ---- - ---- -------------------
-------- --------- -
------ -
-----
----
--------- ---------------------
--------- --------------------------
--------- ------------------------------
-----
------
--
-在上面的代码中，我们使用 Link 组件来创建导航链接，通过 to 属性来指定链接到哪个路径。在浏览器中点击链接时，React Router 会根据路径的匹配规则选择对应的页面组件，并将其渲染到页面中。
路由嵌套和重定向
React Router 支持嵌套路由和重定向功能。如果我们的应用需要多层页面嵌套，可以使用 Router 组件来实现：
-- -------------------- ---- -------
-------- ----- -
------ -
--------
--------
------ -------- ------
--------- --
--------
------ --------------
---------- --
--------
---------
---------
--
-
-------- ----------- -
------ -
-----
--------
------ ------------- ------
------------- --
--------
------ ------------------
---------------- --
--------
---------
------
--
-在上面的代码中，我们使用了一个嵌套的 Switch 组件来实现在 /users 页面下的二级路由。当在 /users 页面时，会显示 UserListPage 组件；当在 /users/:id 页面时，会显示 UserProfilePage 组件。
另外，如果我们的应用需要实现重定向功能，可以使用 Redirect 组件：
-- -------------------- ---- -------
-------- ----- -
------ -
--------
--------
------ -------- ------
--------- --
--------
------ --------------
---------- --
--------
------ ----------------
------------ --
--------
--------- ------ --
---------
---------
--
-在上面的代码中，我们使用了一个名为 Redirect 的组件来实现将所有未匹配的路径重定向到根路径。
示例应用
接下来，我们来看一个完整的例子，它实现了一个包含首页、关于页面、联系我们页面和用户信息页面的多页面应用。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------- ------- ------ ----- --------- ------------- - ---- -------------------
-------- ----- -
------ -
--------
-------- --
--------
------ -------- ------
--------- --
--------
------ --------------
---------- --
--------
------ ----------------
------------ --
--------
------ --------------
---------- --
--------
--------- ------ --
---------
---------
--
-
-------- --------- -
------ -
-----
----
--------- ---------------------
--------- --------------------------
--------- ------------------------------
--------- ----------------------------
-----
------
--
-
-------- ---------- -
------ -------------------
-
-------- ----------- -
------ --------------
-
-------- ------------- -
------ --------------
-
-------- ----------- -
----- - ---- - - ----------------
------ -
-----
--------
------ ----------- ------
------------- --
--------
------ ---------------------
---------------- --
--------
---------
------
--
-
-------- -------------- -
------ -
-----
-------------
----
--------- ---------------- -------------
--------- ---------------- -------------
--------- ---------------- -------------
-----
------
--
-
-------- ----------------- -
----- - ------ - - ----------------------------
------ -
-----
-------------
------- -- ---------------
------ -----
------ ------
------
--
-
------ ------- ----在上面的代码中，我们将 NavMenu 组件与多个页面组件通过 Route 组件进行关联，使用 useRouteMatch 钩子函数实现了参数的传递和访问。
总结
React Router 是一个功能强大的路由库，它为 React 应用开发提供了便利和效率。我们可以使用它来实现多页面应用、嵌套路由、重定向等功能，也可以通过 Link 组件来实现页面之间的跳转。有了 React Router，我们能够更加便捷地管理应用的路由，实现复杂的页面交互效果，并提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6497a2b348841e98944a09fa