React Router 是 React 生态系统中最受欢迎的路由库之一，它提供了一种简单而强大的方式来管理前端应用程序的路由。在本文中，我们将深入探讨 React Router 4.3 的一些关键概念和用法，包括路由配置、路由匹配、嵌套路由、重定向和路由守卫等。
路由配置
React Router 的路由配置是通过一个数组来定义的，这个数组中包含了每个路由的配置信息。每个路由配置都包含以下属性：
path：路由的 URL 路径component：路由所对应的组件exact：是否开启精确匹配模式strict：是否开启严格匹配模式sensitive：是否开启大小写敏感模式
下面是一个简单的路由配置示例：
-- -------------------- ---- -------
------ - ----- - ---- -------------------
------ ---- ---- --------------------
------ ----- ---- ---------------------
----- ------ - -
- ----- ---- ---------- ----- ------ ---- --
- ----- --------- ---------- ------ ------ ---- --
--
-------- ----- -
------ -
-----
------------------- ------ -- -
------ ----------- ---------- --
---
------
--
-在上面的示例中，我们定义了两个路由：/ 和 /about，它们分别对应了 Home 和 About 组件。exact 属性用于开启精确匹配模式，这意味着只有当 URL 完全匹配时，该路由才会被匹配。strict 和 sensitive 属性用于开启严格匹配和大小写敏感模式，这些属性通常用于处理一些特殊的路由场景。
路由匹配
React Router 的路由匹配是通过一个算法来实现的，这个算法会根据当前 URL 和路由配置进行匹配，如果匹配成功，就会渲染对应的组件。路由匹配的过程通常分为两个阶段：URL 解析和路由匹配。
URL 解析
在 URL 解析阶段，React Router 会将当前 URL 解析成一个对象，该对象包含以下属性：
pathname：URL 的路径部分search：URL 的查询字符串部分hash：URL 的哈希部分state：URL 的状态对象
我们可以使用 useLocation 钩子来访问当前 URL 对象：
-- -------------------- ---- ------- ------ - ----------- - ---- ------------------- -------- ------ - ----- -------- - -------------- ------------------------------- ----------------------------- --------------------------- ---------------------------- ------ -------------- -
路由匹配
在路由匹配阶段，React Router 会将当前 URL 对象与路由配置进行匹配，如果匹配成功，就会渲染对应的组件。路由匹配的过程通常分为两个步骤：路由匹配和组件渲染。
路由匹配
路由匹配是通过一个算法来实现的，该算法会根据当前 URL 对象和路由配置来判断是否匹配成功。在匹配过程中，React Router 会根据路由配置中的 path 属性来进行匹配，如果 URL 对象的 pathname 属性和 path 属性匹配成功，就会认为路由匹配成功。
-- -------------------- ---- ------- ------ - ------------- - ---- ------------------- -------- ------- - ----- ----- - ------------------------ ------------------- ------ --------------- -
在上面的示例中，我们使用 useRouteMatch 钩子来进行路由匹配，如果 URL 对象的 pathname 属性和 /about 匹配成功，就会返回一个匹配对象。该匹配对象包含以下属性：
path：路由配置中的path属性url：匹配的 URLisExact：是否精确匹配params：URL 参数
组件渲染
在路由匹配成功后，React Router 会渲染对应的组件。在组件中，我们可以使用 useParams 钩子来访问 URL 参数：
-- -------------------- ---- ------- ------ - --------- - ---- ------------------- -------- ------ - ----- - -- - - ------------ ---------------- ------ -------- ---------- -
在上面的示例中，我们使用 useParams 钩子来访问 URL 参数，如果 URL 匹配成功，就会返回一个包含 URL 参数的对象。
嵌套路由
React Router 还支持嵌套路由，这意味着我们可以在一个组件中定义多个子路由。在嵌套路由中，我们通常会使用 Switch 和 Route 组件来进行路由匹配。
-- -------------------- ---- -------
------ - ------- ------ ----- ------------- - ---- -------------------
-------- ------- -
----- ----- - ----------------
------ -
-----
--------------
----
----
----- -------------------------- --------
-----
----
----- -------------------------- --------
-----
----
----- -------------------------- --------
-----
-----
--------
------ ---------------------------
----- --
--------
---------
------
--
-
-------- ------ -
----- - -- - - ------------
----------------
------ -------- ----------
-在上面的示例中，我们在 Users 组件中定义了三个子路由，它们分别对应了 User 组件中的三个不同的 URL 参数。在子路由中，我们使用了 useRouteMatch 钩子来获取当前 URL 对象的匹配信息，并使用 Link 组件来生成子路由的链接。在 Switch 组件中，我们定义了一个带有 URL 参数的路由，如果 URL 匹配成功，就会渲染 User 组件。
重定向
React Router 还支持重定向，这意味着我们可以将某个 URL 重定向到另一个 URL。在重定向中，我们通常会使用 Redirect 组件来进行重定向。
-- -------------------- ---- -------
------ - -------- - ---- -------------------
-------- ----- -
------ -
-----
--------
------ -------------
----- --
--------
------ --------------
------ --
--------
--------- -------- ---------- --
---------
------
--
-在上面的示例中，我们定义了两个路由：/home 和 /about，并将根路径 / 重定向到 /home。在 Redirect 组件中，我们使用了 from 和 to 属性来指定重定向的来源和目标 URL。
路由守卫
React Router 还支持路由守卫，这意味着我们可以在路由匹配前或匹配后执行一些操作，例如验证用户身份、加载数据等。在路由守卫中，我们通常会使用 useEffect 钩子来执行一些异步操作。
-- -------------------- ---- -------
------ - ---------- -------- - ---- --------
------ - ---------- - ---- -------------------
-------- -------------- --------- ------- -- -
----- ---------- ------------ - ----------------
----- ------- - -------------
------------ -- -
----- ----- - ------------------------------
-- ------- -
------------------
- ---- -
-----------------------
-
-- -----------
------ -------- - ------ ---------------------------- - -----
-
-------- ----------- -
------ -------------------
-
-------- ----- -
------ -
-----
--------
------ --------------
------ --
--------
------------- ------------------
---------- --
---------------
---------
------
--
-在上面的示例中，我们定义了一个私有路由组件 PrivateRoute，它会根据用户是否登录来决定是否渲染对应的子路由。在 useEffect 钩子中，我们通过访问本地存储来验证用户是否已登录，如果未登录，则重定向到登录页面。
总结
React Router 是一个非常强大和灵活的路由库，它可以帮助我们管理前端应用程序的路由。在本文中，我们深入探讨了 React Router 4.3 的一些关键概念和用法，包括路由配置、路由匹配、嵌套路由、重定向和路由守卫等。希望本文能够帮助你更好地理解和应用 React Router。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663f0573d3423812e4d410bf