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

     

     

  • 相关阅读:
    Tarjan 算法 自学整理
    POJ 2395 Out of Hay
    Codevs 1557 热浪
    Codevs 2956 排队问题
    Codevs 1005 生日礼物
    集合
    奇怪的函数
    关押罪犯
    搭积木
    大数据
  • 原文地址:https://www.cnblogs.com/SCAU-gogocj/p/15330592.html
Copyright © 2020-2023  润新知