• 笔记react router 4(四)


      看完Router的变化,接着来说<Switch>组件。

    在3.X中,你可以指定很多子路由,但是只有第一个匹配的路径才会被渲染。

    就像这样,

    <Route path='/' component={App}>
      <IndexRoute component={Home} />
      <Route path='about' component={About} />
      <Route path='contact' component={Contact} />
    </Route>

    4.X中提供了一个相似的方法用来代替<IndexRoute>,就是<Switch>组件,当一个<Switch>组件被渲染时,react只会渲染Switch下与当前路径匹配的第一个子<Route>

    就像这样,

    <Route path="/" render={()=>
           <Admin>
                 <Switch>
                       <Route path='/home' component={Home} />
                <Route path='/about' component={About} />
                <Route path='/contact' component={Contact} />
    </Switch> </Admin> } />

      正如你所理解的意思一样,switch就同我们代码中使用的一样,当匹配到一个值之后,即不再继续匹配,具有break的作用。因此,如果我们需要严格匹配,就需要在Route上加上exatc属性。

    但是要注意,如果你的组件如例子中使用了嵌套,那么外层路由就不可以加exatc了。

  • 相关阅读:
    2017ICPC沈阳赛现场赛 L-Tree (dfs)
    2019西北工业大学程序设计创新实践基地春季选拔赛 D(卢卡斯定理)
    Codeforces Round #454 (Div. 1) CodeForces 906D Power Tower (欧拉降幂)
    模板
    洛谷
    模板
    洛谷
    洛谷
    模板
    模板
  • 原文地址:https://www.cnblogs.com/zyl-Tara/p/9685972.html
Copyright © 2020-2023  润新知