React Router 是 React 常用的一个路由管理库，它提供了路由切换、导航、重定向等功能。但是在实际应用中，很多情况下我们需要动态传入参数或者进行路由重定向操作。本文将会详细介绍 React Router 如何处理动态路由参数和重定向，并给出示例代码，以便更好地理解和应用。
动态路由参数
在实际开发中，我们经常需要通过 URL 参数传递数据。React Router 支持通过动态路由参数来实现这种需求。动态路由参数可以被看作是一个通配符，可匹配任意值。例如，我们可以定义一个包含动态路由参数 :id 的路由：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------- ------- ------ ---- - ---- -------------------
-------- ----- -
------ -
--------
-----
-----
----
----
----- --------------------------
-----
----
----- --------------------------
-----
-----
------
--------
------ ------------------
----- --
--------
---------
------
---------
--
-
-------- ------ -
--- - -- - - ------------
------ -------- --- ----------
-在上述示例中，我们通过 Link 组件设置了两个链接，分别指向 /users/123 和 /users/456。而在 Route 组件中，我们则定义了一个路由，路径为 /users/:id，其中 :id 表示动态路由参数。当用户点击某个链接并跳转到对应的路由时，User 组件会被加载，并从 useParams() 函数中获取 URL 中传递的动态路由参数 id，最终将其展示出来。
参考代码地址：https://codesandbox.io/s/react-router-dynamic-route-1n6mt
路由重定向
路由重定向是指在用户跳转到某个路由之前，先将用户重定向到另一个路由。React Router 也提供了对路由重定向的支持。一般情况下，我们使用 <Redirect> 组件来完成路由重定向，它可以将用户重定向到指定路径。下面是一个简单的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------- ------- ------ -------- - ---- -------------------
-------- ----- -
------ -
--------
-----
-----
----
----
----- ----------------------
-----
----
----- ------------------------
-----
----
----- --------------------------------
-----
-----
------
--------
------ ----- ---------
--------- ---------- --
--------
------ -------------
----- --
--------
------ --------------
------ --
--------
------ ------------------
---------- --
--------
------ ---------
-------- --
--------
---------
------
---------
--
-
-------- ------ -
------ --------------
-
-------- ------- -
------ ---------------
-
-------- ----------- -
------ -------------------
-
-------- --------- -
------ ------- --- -----------
-在上述示例中，我们设置了三个路径：/home，/about 和 /dashboard。当用户访问根路由时，我们通过 <Redirect> 组件将其重定向到 /home。而在 Switch 组件之外，我们还设置了一个 Route，路径为 *，表示当用户访问任意不存在的路径时，都会显示 NoMatch 组件。
参考代码地址：https://codesandbox.io/s/react-router-redirect-qzoup
综上所述，本文详细介绍了 React Router 如何处理动态路由参数和路由重定向，并给出了相应的示例代码。希望本文对你在 React 开发中的路由管理有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67821994935627c900f7307b
