React|【ReactRouter5】路由的模糊匹配，重定向以及嵌套路由 javascript|react.js|前端

文章目录

路由的模糊匹配与严格匹配
- ?模糊匹配
- ?严格匹配
- ?总结
路由的重定向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 最开始的页面是路由链接没有匹配上任何组件，如果想在页面刚呈现就能匹配上About组件，就需要用到路由的重定向。

{/* 注册路由 */} >

Redirect一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由。
嵌套路由假如我们要给Home组件注册两个子组件路由
?文件夹建立方式 【React|【ReactRouter5】路由的模糊匹配，重定向以及嵌套路由】我们做的News和Message组件其实都是Home组件的子组件，有两种文件建立的模式：