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

文章目录

  • 路由的模糊匹配与严格匹配
    • ⛳模糊匹配
    • ⛳严格匹配
    • ⛳总结
  • 路由的重定向Redirect
  • 嵌套路由
    • ⛳文件夹建立方式
    • ⛳路由的匹配
    • ⛳总结

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

【ReactRouter5】路由的模糊匹配,重定向以及嵌套路由_第1张图片

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

⛳模糊匹配

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

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

【ReactRouter5】路由的模糊匹配,重定向以及嵌套路由_第2张图片

原理:

在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>

【ReactRouter5】路由的模糊匹配,重定向以及嵌套路由_第3张图片

⛳总结

  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的文件夹,看个人喜好了

【ReactRouter5】路由的模糊匹配,重定向以及嵌套路由_第4张图片

⛳路由的匹配

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

所以,在子组件嵌套路由中的 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. 路由的匹配是按照注册路由的顺序进行的

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

你可能感兴趣的:(React,前端,javascript,react.js)