随着 Web 应用的复杂性不断提高，单页应用变得越来越普遍，React Router 可以帮助我们实现前端路由。
React Router 是 React 官方推出的一个第三方库，它可以帮助我们实现前端路由的功能。
React Router 的使用
React Router 通过组件的嵌套关系构建路由结构。我们可以通过这些组件来实现路由的跳转和页面的展示。
路由的安装
我们可以使用 npm 进行安装：
npm install react-router-dom --save
路由的配置
在项目中，我们通常将路由的配置放在一个单独的文件中，例如 routes.js。
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------------- -- ------- ------ ---- - ---- ------------------
------ ---- ---- -------------------
------ ----- ---- --------------------
------ ------- ---- ----------------------
----- ------ - -- -- -
--------
-----
----
--------- -----------------------
--------- -----------------------------
--------- ---------------------------------
-----
--- --
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
------
---------
-
------ ------- ------从上面的代码中，我们可以看到，BrowserRouter 组件包含了一些子组件：
<Link>：用于渲染路由链接。<Route>：用于渲染匹配当前 URL 的组件。
按路由的定义渲染组件
路由的配置完成以后，我们就可以根据当前 URL 匹配路由来渲染组件了。
-- -------------------- ---- -------
------ - ------------- -- ------- ------- ----- - ---- ------------------
----- --- - -- -- -
--------
---- ----------------
------- --
--------
------ -------- ----- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
------ ------------------- --
---------
------
---------
-上述代码中，<Switch> 组件对所有 <Route> 进行遍历匹配，只渲染与当前 URL 最匹配的那个路由。可以看到，每个 <Route> 组件中都包含一个 path 属性，该属性用于指定该路由的路径，同时还包含一个 component 属性，用于指定当前路由所展示的组件。
多级路由
React Router 不仅可以实现单级路由，还能实现多级路由。我们可以通过将路由嵌套来实现多级路由。
-- -------------------- ---- -------
----- ------ - -- -- -
--------
-----
----
--------- -----------------------
--------- -----------------------------
--------- ---------------------------------
-----
--- --
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- --------------------
------ ------------------ -------------- --
------ ------------------ -------------- --
--------
------
---------
-上述代码中，<Route> 组件嵌套了子 <Route> 组件，从而实现了多级路由。同时，我们可以看到，子路由也会根据父级路由进行匹配，以此实现多级路由的功能。
结语
React Router 可以帮助我们实现前端路由的功能，使我们能够更加便利地开发单页应用。本文介绍了 React Router 的基本使用，以及如何实现多级路由。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6782a63e935627c900162b57
