react-router-dom入门使用教程(路由的模糊匹配与严格匹配)_React_

模糊匹配

Home

点击Home，进入路径/home/a/b，此时模糊匹配到/home路径的组件{Home}。

开启严格匹配

Home // 开启严格匹配：exact={true} 

此时，点击Home，进入路径/home/a/b，无法匹配/home路径下的{Home}组件。

1.默认使用的就是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致。
2.开启严格匹配：

// 开启严格匹配：exact={true} 

3.严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

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是Home的子组件，News组件是Home的子组件
例如：注册Message组件时需要加上父路由Home的path值：/home/message

到此这篇关于react-router-dom入门使用教程(路由的模糊匹配与严格匹配)的文章就介绍到这了,更多相关react-router-dom使用内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！