看完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