本文详解React Router的路由匹配机制，重点解析模糊匹配与开启严格匹配（exact）的区别。通过代码示例说明如何控制路径匹配精度，避免二级路由失效。同时介绍Redirect组件在路由重定向中的应用，以及嵌套路由中父级path的注册规范与匹配顺序。
模糊匹配
<!-- 编写路由链接 -->
<NavLink to="/home/a/b">Home</NavLink>
<!-- 注册路由 -->
<Switch>
<Route path="/home" component={Home} />
</Switch>当用户点击Home链接并访问路径/home/a/b时，系统会进行模糊匹配，成功加载路径为/home的{Home}组件。
开启严格匹配
<!-- 编写路由链接 -->
<NavLink to="/home/a/b">Home</NavLink>
<!-- 注册路由 -->
<Switch>
// 开启严格匹配：exact={true}
<Route exact path="/home" component={Home} />
</Switch>
若启用了严格匹配模式，点击Home并访问路径/home/a/b时，系统将无法匹配到路径为/home的{Home}组件，导致匹配失败。
1. React Router默认采用模糊匹配机制，其核心逻辑是：输入的路径必须包含目标匹配路径，且两者顺序需保持一致。2. 若要启用严格匹配，需在Route组件中设置exact属性。
// 开启严格匹配：exact={true}
<Route exact path="/home" component={Home} />
3. 建议谨慎开启严格匹配，因为在某些场景下，强制开启严格匹配可能会导致二级路由无法正常匹配。
Redirect的使用
路由重定向
{/* 注册路由 */}
<Switch>
<Route path="/about" component={About} />
<Route path="/home" component={Home} />
<Redirect to="/home" />
</Switch>
Redirect组件通常配置在所有路由注册的末尾。当用户访问的路径无法匹配任何已注册的路由时，系统会自动跳转到Redirect指定的目标路由。
嵌套路由使用
在注册子路由时，必须包含父路由的path值，格式为/父路由path/子路由path。
路由的匹配过程严格遵循路由注册的先后顺序进行。
src项目结构
├─App.jsx
├─index.js
├─pages
| ├─Home
| | ├─index.jsx
| | ├─News
| | | └index.jsx
| | ├─Message
| | | └index.jsx
| ├─About
| | └index.jsx
├─components
| ├─MyNavLink
| | └index.jsx
| ├─Header
| | └index.jsx
Message组件和News组件均为Home组件的子组件。例如，注册Message组件时，其路径需加上父路由Home的path值，即/home/message。
<Switch>
<Route path="/home/news" component={News} />
<Route path="/home/message" component={Message} />
<Redirect to="/home/news" />
</Switch>
本文介绍了react-router-dom的路由匹配与重定向用法，更多相关内容请参考本站往期文章或继续阅读后续教程，感谢支持。