React Router 是 React 的一个常用路由库，它提供了一种方便的方式来管理应用程序的路由。在 React Router 4 中，路由配置方式发生了一些变化。本文将介绍 React Router 4 中路由配置的使用技巧，帮助你更好地理解和使用 React Router。
路由配置
React Router 4 中的路由配置分为三个部分：路由器、路由和组件。路由器是一个高阶组件，用于包装整个应用程序。路由是一个组件，用于定义路径和组件的映射关系。组件是路由对应的组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------- ----- - ---- -------------------
------ ---- ---- --------------------
------ ----- ---- ---------------------
----- --- - -- -- -
--------
-----
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------
---------
--
------ ------- ----在上面的代码中，我们使用 BrowserRouter 作为路由器，将整个应用程序包装在其中。然后定义了两个路由，分别对应路径为 / 和 /about，并指定了对应的组件。
路由匹配
在 React Router 4 中，路由匹配是通过 path-to-regexp 库实现的。它允许我们使用类似于正则表达式的语法来匹配路径。
精确匹配
默认情况下，路由是精确匹配的。也就是说，只有当路径完全匹配时，路由才会被匹配。
<Route exact path="/" component={Home} />上面的代码中，我们使用 exact 属性来指定精确匹配。这意味着只有当路径为 / 时，才会匹配到该路由。
模糊匹配
有时候我们需要进行模糊匹配，比如在匹配多个路径时。这时我们可以使用 path 属性来指定路径。
<Route path="/about" component={About} />上面的代码中，我们使用 path 属性来指定路径为 /about。这意味着当路径为 /about 或者 /about/xxx 时，都会匹配到该路由。
嵌套路由
在 React Router 4 中，嵌套路由也很容易实现。我们只需要在路由组件中嵌套其他组件即可。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- -------------------
------ ----- ---- ----------
------ ------- ---- ------------
----- --------- - -- -- -
-----
--------- ---------
------ ------------- ----------------- --
------ --------------- ------------------- --
------
--
------ ------- ----------上面的代码中，我们定义了一个 AboutPage 组件，它包含了两个路由组件。当路径为 /about 或者 /contact 时，都会匹配到对应的路由组件。
路由参数
在 React Router 4 中，我们可以通过路由参数来动态地匹配路径。路由参数是指路径中的变量部分，比如 /users/:id 中的 :id。
获取路由参数
我们可以通过 match.params 属性来获取路由参数。
-- -------------------- ---- -------
------ ----- ---- --------
----- ---- - -- ----- -- -- -
-----
-------- --- ----------------------
------
--
------ ------- -----上面的代码中，我们通过 match.params.id 来获取路由参数。
动态路由
我们可以使用动态路由来匹配路径中的变量部分。动态路由使用 : 来指定变量名。
<Route path="/users/:id" component={User} />上面的代码中，我们定义了一个动态路由，用于匹配路径中的 id 变量。
路由重定向
在 React Router 4 中，路由重定向也很容易实现。我们可以使用 Redirect 组件来实现路由重定向。
import React from 'react';
import { Redirect } from 'react-router-dom';
const NotFound = () => (
<Redirect to="/" />
);
export default NotFound;上面的代码中，我们定义了一个 NotFound 组件，它会将路由重定向到根路径。
总结
本文介绍了 React Router 4 中路由配置的使用技巧，包括路由配置、路由匹配、路由参数、嵌套路由和路由重定向。希望本文对你理解和使用 React Router 4 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65881464eb4cecbf2dd41fec