React Router 是一个基于 React 的路由库，它可以帮助我们在单页应用中管理页面的路由和导航。在本文中，我们将学习 React Router 的基本用法，并结合示例代码进行讲解。
安装
React Router 可以通过 npm 来安装，只需要在终端中运行以下命令即可：
npm install react-router-dom
基本用法
React Router 需要在 BrowserRouter 组件的包裹下才能使用。在该组件中，我们可以定义路由和对应的组件，并在导航栏中使用 Link 组件进行页面跳转。
-- -------------------- ---- -------
------ - -------------- ------ ---- - ---- -------------------
-------- ----- -
------ -
---------------
-----
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
-----
------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------
----------------
--
-
-------- ------ -
------ --------------
-
-------- ------- -
------ ---------------
-在上述代码中，我们首先导入了 BrowserRouter、Route 和 Link 组件，然后在 BrowserRouter 组件中定义了两个导航链接分别用于跳转到首页和关于页面，Route 对应了两个路由分别对应首页和关于页面，并分别指向了对应的组件。
其中 exact 属性表示精确匹配路径，如果不写则会进行路径包含匹配。例如 /about/other 会匹配到 /about，加上 exact 属性则不会。
路径参数
在某些情况下，我们需要在路由中传递参数，比如访问 /user/123 页面时，需要将用户 ID 传递给页面。在 React Router 中，我们可以通过路径参数来实现。
-- -------------------- ---- -------
-------- ----- -
------ -
---------------
-----
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
----
----- ------------------- ----------
-----
-----
------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ ---------------- ---------------- --
------
----------------
--
-
-------- ----------- -
----- ------ - ----------------------
------ -------- --------------
-在上述代码中，我们新增了一个导航链接 User 123，并在路由中通过 :id 的方式定义了一个路径参数。在 User 组件中，通过 match.params.id 获取了路径参数，并展示在页面上。
嵌套路由
有些场景下，我们需要在一个页面中包含多个子页面，并进行子页面的路由跳转。这时候我们可以使用嵌套路由来实现。
-- -------------------- ---- -------
-------- ----- -
------ -
---------------
-----
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
----
----- ------------------- ----------
-----
-----
------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ ---------------- -----------------
------ ------------------------ ----------------------- --
------ ---------------------- --------------------- --
--------
------
----------------
--
-
-------- ----------- -
----- ------ - ----------------------
------ -
-----
-------- -------------
----
----
----- ---------------------------------------------
-----
----
----- -----------------------------------------
-----
-----
----------------
------
--
-
-------- ------------- -
------ -------- -------------
-
-------- ----------- -
------ -------- -----------
-在上述代码中，我们将 User 组件包裹在 BrowserRouter 中，并在 User 组件的子组件中定义了两个嵌套路由，分别对应用户的个人信息和帖子列表的页面，然后在 User 组件中通过 props.children 将子组件展示出来。
总结
React Router 是一个非常强大的路由库，它可以帮助我们解决单页应用中的页面跳转和页面嵌套等问题。本文介绍了 React Router 的基本用法，包括路由的定义、路径参数和嵌套路由等。希望本文能够对大家学习 React Router 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6469f66b968c7c53b09bc941