React-Router - Dynamic Routing

动态加载,就是避免一次性都加载很多模块

render((
    <Router history={hashHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={Home} />
            <Route path="about" getComponent={(nextState, cb) => {
                // do asynchronous stuff to find the components
                cb(null, About)
            } } />
            <Route path="inbox" component={Inbox}>
                {/* add some nested routes where we want the UI to nest */}
                {/* render the stats page when at `/inbox` */}
                <IndexRoute component={NewMessage}/>
                {/* render the message component at /inbox/messages/123 */}
                <Route path="messages/:id" component={Message} />
            </Route>
        </Route>
    </Router>
), document.body)

注意getComponent 动态加载About 组件

当然可以动态加载多个

<Route path="courses/:courseId" getComponents={(nextState, cb) => {
  // do asynchronous stuff to find the components
  cb(null, {sidebar: CourseSidebar, content: Course})
}} />

以为一个path可以对应多个组件.也就是你path match了,想渲染多个是可以的

const routes = (
  <Route component={App}>
    <Route path="groups" components={{main: Groups, sidebar: GroupsSidebar}} />
    <Route path="users" components={{main: Users, sidebar: UsersSidebar}}>
      <Route path=":userId" component={Profile} />
    </Route>
  </Route>
)