React中嵌套路由

React中嵌套路由

 

一、精准匹配和模糊匹配

（1）、模糊匹配：

// 路由跳转
<MyNavLink to="/home/a/b">Home</MyNavLink>
// 注册路由
<Route path="/home" component={Home}/>

点击侧边栏，跳转到 localhost:3000/home/a/b 我们的Home组件还是可以显示的，这就是模糊匹配

 

但是，反过来，代码如果是这样的话

<MyNavLink to="/home">Home</MyNavLink>
​
<Route path="/home/a/b" component={Home}/>

如果是这样的话，Home组件就不会显示了

 

总结：

• Route中path中一个都不能少才可以匹配上，所以 NavLink中的to属性中只要有了Route中的所有path那么就可以匹配上了

• 但是如果我们NavLink的to属性，写的是 /a/home/b 的话也是显示不了Home的，只是以第一个/符号后面是否有Route的path路径才行的

 

原理:

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

 

（2）精准匹配：

介绍：

我们to属性的值和path属性的值要完全一样才行

实现：

准确的 exact (注册的时候就开启精准匹配)，默认是模糊匹配，手动开启严格匹配

<Route exact={true} path="/gogocj/home" component={Home}/>

简略的写法：

<Route exact path="/gogocj/home" component={Home}/>

 

注意：

不要注册路由都全部开启严格匹配，这样会出现很多严重的问题

使用原则：

如果默认模糊匹配的时候没有发生诡异的情况，那么就不用开启严格匹配，否则就开启严格匹配模式

因为开启了之后，会导致无法继续匹配二级路由的情况

 

 

二、Redirect的使用

也就是一开始就自动跳转到一个默认的路径中去

位置：

放在Route注册路由的最下方

原理：

注册路由都没匹配上的话，就去Redirect指定的路径中

<Switch>
    <Route  path="/about" component={About}/>
    <Route  path="/home" component={Home}/>
    <Redirect to="/about"/>
</Switch>

 

三、嵌套子路由

假如我们要给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="/about"/>
</Switch>

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

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

 

所以要：

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