React Router 是一个 React 应用的路由库。它使得在 SPA（单页应用）中实现多个页面的切换变得更加容易。本文将探讨 React Router 在 SPA 应用中的使用最佳实践，包含详细的介绍、示例代码以及指导意义。
React Router 概述
React Router 是一个基于 React 构建的路由库，支持 SPA 应用中的 URL 路由。React Router 可以进行动态路由和代码分割，使得应用程序的性能和用户体验提高。使用 React Router 可以将SPA应用的 URL 与组件进行匹配，从而实现多页面应用的切换。
React Router 的基本用法
下面是一个基本使用React Router的示例代码：
------ ----- ---- --------
------ - ------------- -- ------- ------ ---- - ---- -------------------
------ ---- ---- ---------
------ ----- ---- ----------
------ ------- ---- ------------
----- --- - -- -- -
--------
-----
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
----
----- ----------------------------
-----
-----
------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
------
---------
--
------ ------- ----上述示例代码中使用了 <BrowserRouter> 组件包装React应用，并在其中定义了三个链接 Home，About和Contact。使用 <Route> 组件可以根据 URL 路径匹配相应的组件进行渲染。在这个示例中，路径匹配 "/" 将会渲染 Home 组件，路径匹配 "/about" 将会渲染 About 组件，路径匹配 "/contact" 将会渲染 Contact 组件。
React Router 中的 Switch 组件
Switch 组件是一种比 <Route> 更智能的路由组件。它匹配到第一个符合要求的路由将停止匹配。这对于需要渲染单个页面的场景非常有用。下面是一个使用 Switch 的示例代码：
------ ----- ---- --------
------ - ------------- -- ------- ------ ------ - ---- -------------------
------ ---- ---- ---------
------ ----- ---- ----------
------ ------- ---- ------------
------ -------- ---- -------------
----- --- - -- -- -
--------
-----
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
----
----- ----------------------------
-----
-----
------
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
------ -------------------- --
---------
------
---------
--
------ ------- ----在上述示例代码中，<Switch> 组件是 Router 组件的子组件，并包含了 <Route> 组件，最后一个路由使用 component 属性匹配到 NotFound 组件。如果前面的路由未匹配到，最后一个路由将会匹配到。
动态路由
React Router 支持动态路由，就是在路由路径中使用参数。例如：
------ ----------------- ----------------------- --
在以上示例代码中，id 是一个参数。路由路径是 /users/123。在 UserProfile 组件中可以通过 props.match.params.id 获取到这个参数的值。
路由守卫
路由守卫是一个常见的场景，例如需要在登录之后才能访问特定页面。React Router 支持路由守卫。下面是一个通过路由守卫控制访问页面的示例代码：
------ ----- ---- --------
------ - ------------- -- ------- ------ -------- - ---- -------------------
----- -------- - -
---------------- ------
---------------- -
-------------------- - -----
-------------- ----- -- ---- -----
--
----------- -
-------------------- - ------
-------------- -----
-
--
----- ------------ - -- ---------- ---------- ------- -- -- -
------
---------
------------- --
------------------------ - -
---------- ---------- --
- - -
---------
-----
--------- ---------
------ - ----- -------------- -
--
--
-
-
--
--
----- ---- - -- -- --------------
----- ------------- - -- -- ------------- ----------
----- --------- - -- ------- -- -- -
-----
--------- ---------
-------
----------- --
------------------------ -- -
------------------
--
-
-
------------
---------
------
--
----- --- - -- -- -
--------
-----
-----
----
----
----- ------------------
-----
----
----- ------------------------- -----------
-----
-----
------
------ ----- -------- ---------------- --
------------- ----------------- ------------------------- --
------ ------------- --------------------- --
------
---------
--
------ ------- ----在以上示例代码中，fakeAuth 对象模拟了一个认证服务。PrivateRoute 组件是一个包装组件，它使用 render 属性渲染一个组件，同时使用 fakeAuth.isAuthenticated 属性验证是否认证。如果已认证则返回包装组件，否则将用户重定向到登录页面。ProtectedPage 组件是一个需要保护的组件，它被 PrivateRoute 包装。
React Router 4 常见问题
- 我们是否必须使用
BrowserRouter？
不是的，React Router 4 还支持 HashRouter 和 MemoryRouter。
BrowserRouter：使用 HTML5 history API（pushState，replaceState 和 popstate）实现路由。HashRouter：使用 URL 中的 hash（＃）实现路由。MemoryRouter：使用内存（JS 对象）实现路由。用于测试。
- 多级路由如何实现？
例如：/users/profile
需要在 <Route> 组件中使用 path 属性来实现多级路由。示例代码：
------ ------------- ------------------ ------ -------------- ----------------------- -- --------
- 如何动态更改路由路径？
React Router 4 提供了一个 withRouter 高阶组件，用于在不同组件中使用 props.history。示例代码：
------ ----- ---- --------
------ - ---------- - ---- -------------------
----- --------- ------- --------------- -
------------ - ----- -- -
-----------------------
----- ---------- - -----------------------
---------------------------------------------------
--
-------- -
------ -
----- -----------------------------
------
-------------
---------- -- ----------------- - -------
-----------------------
--
------- -----------------------------
-------
--
-
-
------ ------- ----------------------在上述代码中，<form> 元素中的 onSubmit 事件将触发 handleSubmit 方法。该方法调用 history.push 方法动态更改路由路径。
结论
React Router 是一个功能强大的路由库，它提供了多种用于实现路由功能的组件。本文通过介绍 React Router 的基本用法，Switch 组件、动态路由、路由守卫、常见问题等内容，希望您能更好地掌握 React Router 的使用方法，为您的 SPA 应用开发带来便利。
参考文献
- React Router Documentation
- React Router Tutorial: Improve Your Routing in React Apps
- React Router v4: The Complete Guide
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670cb3af5f551281025b6e06