在现代 Web 开发中，单页应用（Single Page Application，SPA）已经成为了主流，而 React 作为目前最流行的前端框架之一，自然也需要一个强大的路由库来支持 SPA 应用的路由。React Router 就是这样一款流行的、基于 React 的路由库。
React Router v4 是 React Router 的最新版本，它在之前的版本基础上进行了重构，重点在于提供灵活的路由配置方式、简化 API，以及更好的组件化支持。本文将深入探索 React Router v4 的使用方法，包括路由配置、路由匹配、路由传参等方面。
安装和基本用法
安装 React Router v4 可以使用 npm，命令如下：
npm install react-router-dom --save
React Router v4 提供了三个主要的组件：
BrowserRouter：使用 HTML5 history API 实现路由跳转；HashRouter：使用 URL hash 实现路由跳转；MemoryRouter：在内存中实现路由跳转。
其中，BrowserRouter 是最常用的，我们以它为例进行介绍。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- -- ------- ------ ---- - ---- -------------------
----- ---- - -- -- -
-----
-------------
------
--
----- ----- - -- -- -
-----
--------------
------
--
----------------
--------
-----
-----
----
--------- -----------------------
--------- -----------------------------
-----
------
--- --
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------
----------
-------------------------------
--上述代码中，我们使用了 BrowserRouter，并在其中定义了两个路由，分别对应 / 和 /about。其中，exact 表示精确匹配，只有当路径完全匹配时才会渲染对应的组件。
在 <nav> 中，我们使用了 Link 组件来定义路由链接，这样点击链接时就会触发路由跳转。在 <Route> 中，我们使用 component 属性来指定需要渲染的组件。
动态路由匹配
在实际开发中，我们经常需要根据用户输入的参数来动态生成路由，React Router v4 提供了非常方便的动态路由匹配机制。例如，我们需要根据用户输入的 ID 来访问不同的用户详情页面，可以使用如下方式：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- -- ------- ------ ---- - ---- -------------------
----- ----- - -
- --- -- ----- ------- --
- --- -- ----- ----- --
- --- -- ----- --------- -
--
----- ---- - -- ----- -- -- -
----- ---- - --------------- -- ------- --- ---------------------------
------ -
-----
--------------------
------
--
--
----- --- - -- -- -
--------
-----
-----
----
--------------- -- -
--- --------------
----- -------------------------------------------
-----
---
-----
------
--- --
------ ----------------- ---------------- --
------
---------
--
----------------
---- ---
-------------------------------
--上述代码中，我们定义了一个 User 组件，用于渲染用户详情页面。在定义路由时，我们使用了 :id 这样的占位符，表示该部分路径为动态参数，可以通过 match.params.id 来获取实际的参数值。在 <Link> 中，我们使用了 ${user.id} 来动态生成链接。
嵌套路由
在实际开发中，我们经常需要对页面进行嵌套，例如在一个文章详情页面中嵌套评论列表等。React Router v4 提供了嵌套路由的支持，可以方便地实现这种场景。例如，我们需要在 /posts/:id 路由下嵌套 /posts/:id/comments 路由，可以使用如下方式：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- -- ------- ------ ---- - ---- -------------------
----- -------- - -
- --- -- ------- -- -------- -------- -- --
- --- -- ------- -- -------- -------- -- --
- --- -- ------- -- -------- -------- -- --
- --- -- ------- -- -------- -------- -- -
--
----- ------- - -- ----- -- -- -
----- ------ - --------------------------
----- ------------ - ----------------------- -- -------------- --- --------
------ -
-----
------------------------- -- -
---- -----------------
------------------------
------
---
------
--
--
----- ---- - -- ----- -- -- -
-----
-------- ----------------------
--- --
-------- ------------- --
------
--
----- --- - -- -- -
--------
-----
-----
----
--------- ------------------ -------------
--------- ------------------ -------------
-----
------
--- --
------ ----------------- ---------------- --
------
---------
--
----------------
---- ---
-------------------------------
--上述代码中，我们定义了一个 Comment 组件，用于渲染评论列表。在 <Route> 中，我们使用了 component 属性来指定需要渲染的组件，同时也将 match 对象传递给了 Comment 组件，以便获取路由参数。在 Post 组件中，我们使用了 <Comment match={match} /> 的方式来渲染嵌套的评论列表。
路由传参
在实际开发中，我们经常需要将参数传递给路由组件，例如在用户详情页面中需要显示用户的订单列表。React Router v4 提供了多种方式来实现路由传参，包括 URL 参数、查询参数、state 参数等。这里我们以 URL 参数为例进行介绍。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- -- ------- ------ ---- - ---- -------------------
----- ------ - -
- --- -- ------- -- ----- ------ -- --
- --- -- ------- -- ----- ------ -- --
- --- -- ------- -- ----- ------ -- --
- --- -- ------- -- ----- ------ -- -
--
----- ----- - -- ----- -- -- -
----- ------- - --------------------------
----- ----- - ----------------- -- -------- --- ---------
------ -
-----
---------------------
------
--
--
----- ---- - -- ----- -- -- -
-----
-------- ----------------------
--- --
----
-------------------- -- ------------ --- ------------------------------------ -- -
--- ---------------
----- ----------------------------------------------------------
-----
---
-----
--- --
------ --------------------------------- ----------------- --
------
--
----- --- - -- -- -
--------
-----
-----
----
--------- ------------------ -------------
--------- ------------------ -------------
--------- ------------------ -------------
-----
------
--- --
------ ----------------- ---------------- --
------
---------
--
----------------
---- ---
-------------------------------
--上述代码中，我们定义了一个 User 组件，用于渲染用户详情页面。在 User 组件中，我们使用了 ${match.url}/orders/${order.id} 的方式来生成订单详情页面的链接，这样点击链接时就会将订单 ID 作为 URL 参数传递给 Order 组件。在 Order 组件中，我们使用了 match.params.id 来获取 URL 参数。
总结
React Router v4 是 React 生态中非常重要的一环，它为开发者提供了灵活、简单、易用的路由配置和管理方式，支持动态路由匹配、嵌套路由、路由传参等功能。在实际开发中，我们可以根据具体需求灵活使用 React Router v4，提高开发效率、降低开发难度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/656447d5d2f5e1655ddb354a