- 🔻路由的模糊匹配与严格匹配
- ⛳模糊匹配
- ⛳严格匹配
- ⛳总结
- 🔻路由的重定向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*/}
- 默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且
顺序要一致） - 开启严格匹配：
- 严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由
最开始的页面是路由链接没有匹配上任何组件，如果想在页面刚呈现就能匹配上About组件，就需要用到 路由的重定向。
{/* 注册路由 */}
Redirect一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由。
🔻嵌套路由假如我们要给Home组件注册两个子组件路由
⛳文件夹建立方式我们做的News和Message组件其实都是Home组件的子组件，有两种文件建立的模式：
- 在Home文件夹下直接再建立文件夹
- 在和Home同级目录下，建立名为 Home_news的文件夹，看个人喜好了
路由是有先后的注册顺序的，会先从最先注册的路由开始查询的。
所以，在子组件嵌套路由中的 to属性前面添加父组件的路径
News
原因：由于模糊匹配的原则，前面的home会匹配到父组件，所以跳转到的路径就 localhost:3000/home/news 了
这里就是为什么如果有子嵌套路由的话，就不要开启严格匹配的原因。
{/* 注册路由 */}
因为 /home/news 路由一开始是从这三个最先注册的路由开始匹配的，由于模糊匹配所以匹配上了Home，之后才到Home里面再进行子路由的匹配的。
如果是严格匹配的话，那么就是直接到 < < > > ，直接就到了Home组件了，所以就是从外层就屏蔽掉了，根本就进不去子路由了。
Home_index.jsx:
{/* 注册路由 */}
- 注册子路由时要写上父路由的path值
- 路由的匹配是按照注册路由的顺序进行的
今天的分享就到这里啦 ✨ 如果对你有帮助的话，还请👉🏻关注💖点赞🤞收藏⭐评论🔥哦 不定时回访哟🌹
