文章目录
- 路由的模糊匹配与严格匹配
-
- ?模糊匹配
- ?严格匹配
- ?总结
- 路由的重定向Redirect
- 嵌套路由
-
- ?文件夹建立方式
- ?路由的匹配
- ?总结
上篇文章了解了 路由组件及基本使用
今天来学习一下路由的模糊匹配,重定向以及嵌套路由的相关知识吧
文章图片
路由的模糊匹配与严格匹配 ?模糊匹配 点击Home路由链接,路径为/home/a/b,模糊匹配到路径为/home的Home组件
{/* 编写路由链接---在react中靠 路由链接 实现切换组件 */}
Home
{/* 注册路由 */}
>
文章图片
原理:
在MyNavLink 中的to属性,会以/作为分隔符,所以就把home、a、b取出来了,并且把取出来的第一个和Route下的path进行比对,匹配上了就显示,匹配不上也不会和后面的a、b进行匹配了,就不会显示组件了。
反过来,代码如果是这样的话,Home组件就不会显示了。
{/* 编写路由链接---在react中靠 路由链接 实现切换组件 */}
Home
{/* 注册路由 */}
>
注:路由链接里的 home必须在最前面,不能写成 /a/home/b,否则不能模糊匹配。
?严格匹配 编写路由链接时的路径必须和注册路由时的路径完全一样,注册路由时,加上
exact={true}
{/* 编写路由链接---在react中靠 路由链接 实现切换组件 */}
Home
{/* 注册路由 */}
>{/*可以简写成exact*/}
文章图片
?总结
- 默认使用的是模糊匹配(简单记:【输入的路径】必须包含要【匹配的路径】,且
顺序要一致
) - 开启严格匹配:
exact={true} path=“/about” component={About}/> - 严格匹配不要随便开启,需要再开,有些时候开启会导致无法继续匹配二级路由
{/* 注册路由 */}
>
Redirect一般写在所有路由注册的最下方,当所有路由都无法匹配时,跳转到Redirect指定的路由。
嵌套路由 假如我们要给Home组件注册两个子组件路由
?文件夹建立方式 【React|【ReactRouter5】路由的模糊匹配,重定向以及嵌套路由】我们做的News和Message组件其实都是Home组件的子组件,有两种文件建立的模式:
- 在Home文件夹下直接再建立文件夹
- 在和Home同级目录下,建立名为 Home_news的文件夹,看个人喜好了
文章图片
?路由的匹配 路由是有先后的注册顺序的,会先从
最先注册的路由
开始查询的。所以,在子组件嵌套路由中的 to属性前面添加父组件的路径
News
原因:由于模糊匹配的原则,前面的home会匹配到父组件,所以跳转到的路径就 localhost:3000/home/news 了这里就是为什么如果有子嵌套路由的话,就不要开启严格匹配的原因。
{/* 注册路由 */}
>
因为 /home/news 路由一开始是从这三个最先注册的路由开始匹配的,由于模糊匹配所以匹配上了Home,之后才到Home里面再进行子路由的匹配的。如果是严格匹配的话,那么就是直接到 < <
Home_index.jsx:
{/* 注册路由 */}
>
?总结
- 注册子路由时要写上父路由的path值
- 路由的匹配是按照注册路由的顺序进行的
今天的分享就到这里啦 ?
如果对你有帮助的话,还请关注点赞收藏?评论哦
不定时回访哟
推荐阅读
- React|【React】React组件实例的三大属性之state,props,refs(你学废了吗)
- React|【React】深入理解React组件生命周期----图文详解(含代码)
- echarts|CMS项目数据可视化-echarts的使用
- react的useState的用法
- React|Vscode中快速生成代码的方式
- 大屏项目开发,等比缩放
- 微信小程序|微信小程序组件
- 程序|Ant Design Vue 2.x+ 支持所有的现代浏览器。
- javascript案例|JS实现可拖拽的模态框