IndexRoute 元件

下面的例子，你會不會覺得有一點問題？

<Router>
  <Route path="/" component={App}>
    <Route path="accounts" component={Accounts}/>
    <Route path="statements" component={Statements}/>
  </Route>
</Router>

上面程式碼中，訪問根路徑/，不會載入任何子元件。也就是說，App元件的this.props.children，這時是undefined。

因此，通常會採用{this.props.children || <Home/>}

這樣的寫法。這時，Home明明是Accounts和Statements的同級元件，卻沒有寫在Route中。

IndexRoute就是解決這個問題，顯式指定Home是根路由的子元件，即指定預設情況下載入的子元件。你可以把IndexRoute想象成某個路徑的index.html。

<Router>
  <Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="accounts" component={Accounts}/>
    <Route path="statements" component={Statements}/>
  
 
</Route>
</Router>

現在，使用者訪問/的時候，載入的元件結構如下。

<App>
<Home/>
</App>

這種元件結構就很清晰了：App只包含下級元件的共有元素，本身的展示內容則由Home元件定義。這樣有利於程式碼分離，也有利於使用React Router提供的各種API。

注意，IndexRoute元件沒有路徑引數path。

原文連結：http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu