一级二级 Route 匹配

2020-07-20  本文已影响0人  2020路飞

一级路由navbar始终存在,
二级路由的navBarHome显示的前提是在一级路由中匹配到相应的路由,渲染相应组件如Home。

例如,url /hot 先匹配一级路由 ‘/’ 渲染 Home组件 ,再匹配‘/hot’ 渲染 Hot组件。这样两个navbar都有。

作为单页应用,每次渲染url匹配到的route的组件。想像成url从app入口向下滑动,最终到相应的route渲染相应的组件。

  1. 一级路由:
      <Helmet>
          <title>知乎</title>
      </Helmet>
      <NavBar />
      <Switch>
        <Route exact path='/explore' component={Explore} />
        <Route path='/' component={Home} />

      </Switch>

2.二级路由:

       <NavBarHome />
       <Switch>
         <Route exact path='/follow' component={Follow} />
        <Route exact path='/hot' component={Hot} />
        <Route path='/' component={Recommend} />
      </Switch>
上一篇 下一篇

猜你喜欢

热点阅读