IndexRoute

用于给父路由提供默认的子组件，与 <Route> 相比，不能拥有 path 属性。

属性

component { Component }

当匹配到当前路由上时匹配的组件，会被渲染为父组件的 this.props.children。

const routes = (
 <Route path="/" component={App}>
   <IndexRoute component={Groups} />
 </Route>
)
class App extends React.Component {
 render () {
   return (
     <div>
       {this.props.children}
     </div>
   )
 }
}

components { Object }

可以定义多个命名组件，这样不会直接渲染为父组件的 children，而是当做 props 赋给父组件。

const routes = (
 <Route path="/" component={App}>
   <IndexRoute components={{main: Groups, sidebar: GroupsSidebar}} />
 </Route>
)
class App extends React.Component {
 render () {
   const { main, sidebar } = this.props
   return (
     <div>
       <div className="Main">
         {main}
       </div>
       <div className="Sidebar">
         {sidebar}
       </div>
     </div>
   )
 }
}

方法

getComponent

与 component 类似，异步获取组件，用于进行代码分离。

<IndexRoute getComponent={(nextState, cb) => {
 // 异步方法获取组件
 cb(null, Course)
}} />

方法参数:

getComponents

与 components 类似，异步获取组件，用于进行代码分离。

<IndexRoute getComponents={(nextState, cb) => {
 // 异步方法获取组件
 cb(null, {sidebar: CourseSidebar, content: Course})
}} />

方法参数: