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)
}} />

方法参数:

参数名 类型 描述 必选 支持版本
nextState Object
callback Function

getComponents #

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

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

方法参数:

参数名 类型 描述 必选 支持版本
nextState Object
callback Function