【ReactRouter5】路由的模糊匹配，重定向以及嵌套路由

上篇文章了解了 路由组件及基本使用
今天来学习一下路由的模糊匹配，重定向以及嵌套路由的相关知识吧

路由的模糊匹配与严格匹配

⛳模糊匹配

点击Home路由链接，路径为/home/a/b，模糊匹配到路径为/home的Home组件

{/* 编写路由链接---在react中靠 路由链接 实现切换组件 */}
<MyNavLink to="/home/a/b">Home</MyNavLink>
{/* 注册路由 */}
<Switch>
    <Route path="/home" component={Home} />
</Switch>

原理:

在MyNavLink 中的to属性，会以/作为分隔符，所以就把home、a、b取出来了，并且把取出来的第一个和Route下的path进行比对，匹配上了就显示，匹配不上也不会和后面的a、b进行匹配了，就不会显示组件了。

---

反过来，代码如果是这样的话，Home组件就不会显示了。

{/* 编写路由链接---在react中靠 路由链接 实现切换组件 */}
<MyNavLink to="/home">Home</MyNavLink>
{/* 注册路由 */}
<Switch>
    <Route path="/home/a/b" component={Home} />
</Switch>

注：路由链接里的 home必须在最前面，不能写成 /a/home/b，否则不能模糊匹配。

⛳严格匹配

编写路由链接时的路径必须和注册路由时的路径完全一样，注册路由时，加上exact={true}

{/* 编写路由链接---在react中靠 路由链接 实现切换组件 */}
<MyNavLink to="/home/a/b">Home</MyNavLink>
{/* 注册路由 */}
<Switch>   {/*可以简写成exact*/}
    <Route exact={true} path="/home" component={Home} />
</Switch>

⛳总结

1. 默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
2. 开启严格匹配：exact={true} path=“/about” component={About}/>
3. 严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

路由的重定向Redirect

最开始的页面是路由链接没有匹配上任何组件，如果想在页面刚呈现就能匹配上About组件，就需要用到 路由的重定向。

<div className="panel-body">
  {/* 注册路由 */}
	<Switch>
  	<Route path="/about" component={About} />
    <Route path="/home" component={Home} />
    <Redirect to="/about" />
  </Switch>
</div>

Redirect一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由。

嵌套路由

假如我们要给Home组件注册两个子组件路由

⛳文件夹建立方式

我们做的News和Message组件其实都是Home组件的子组件，有两种文件建立的模式：

1. 在Home文件夹下直接再建立文件夹
2. 在和Home同级目录下，建立名为 Home_news的文件夹，看个人喜好了

⛳路由的匹配

路由是有先后的注册顺序的，会先从最先注册的路由开始查询的。

所以，在子组件嵌套路由中的 to属性前面添加父组件的路径

<MyNavLink to="/home/news">News</MyNavLink>

原因：由于模糊匹配的原则，前面的home会匹配到父组件，所以跳转到的路径就 localhost:3000/home/news 了

这里就是为什么如果有子嵌套路由的话，就不要开启严格匹配的原因。

{/* 注册路由 */}
<Switch>
  <Route path="/about" component={About} />
  <Route path="/home" component={Home} />
  <Redirect to="/home" />
</Switch>

因为 /home/news 路由一开始是从这三个最先注册的路由开始匹配的，由于模糊匹配所以匹配上了Home，之后才到Home里面再进行子路由的匹配的。

如果是严格匹配的话，那么就是直接到$<$Redirect to=“/home” /$>$ ，直接就到了Home组件了，所以就是从外层就屏蔽掉了，根本就进不去子路由了。

Home_index.jsx:

{/* 注册路由 */}
<Switch>
  <Route path="/home/news" component={News} />
  <Route path="/home/message" component={Message} />
  <Redirect to="/home/news" />
</Switch>

⛳总结

1. 注册子路由时要写上父路由的path值
2. 路由的匹配是按照注册路由的顺序进行的

今天的分享就到这里啦 ✨
如果对你有帮助的话，还请关注点赞收藏⭐评论哦
不定时回访哟