【轉自阮一峰老師】React Router中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