筆記react router 4(四)

  看完Router的變化,接着來講<Switch>組件。react

在3.X中,你能夠指定不少子路由,可是隻有第一個匹配的路徑纔會被渲染。code

就像這樣,component

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

就像這樣,路由

<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屬性。it

可是要注意,若是你的組件如例子中使用了嵌套,那麼外層路由就不能夠加exatc了。class

相關文章
相關標籤/搜索