react-router

<Router>
    <Route path="/" component={ App }>
        <IndexRoute component={ Dashboard } />
        <Route path="about" component={ About } />
        <Route path="inbox" component={ Inbox }>
            <Route path="/messages/:id" component={ Message }></Route>
            <Redirect from="messages/:id" to="/messages/:id" />
        </Route>
    </Route>
</Router>

const routeConfig = [{
    path: '/',
    component: App,
    indexRoute: { component: Dashboard },
    childRoutes: [{
        path: "about",
        component: About
    }, {
        path: "inbox",
        component: Inbox,
        childRoutes: [{
            path: "/message/:id",
            component: Message
        }, {
            path: "message/:id",
            onEnter: function(nextState, replaceState) {
                replaceState(null, '/message/' + nextState.params.id);
            }
        }]
    }]
}];

React.render(<Router routes={ routeConfig } />, document.body);

route可以定义getChildRoutes, getIndexRoute和getComponents这几个函数。他们都是异步执行，并且只有在需要时才被调用。将这种方式称之为逐渐匹配。react-router会逐渐的匹配url并只加载该url对应页面所需的路径配置和组件。改写routerConfig时需要将component换成getComponent。

const routeConfig = {
    path: "/",
    indexRoute: {
        getComponent(nextState, cb) {
            require.ensure([], (require) => {
                cb(null, require("components/layer/HomePage"));
            }, "HomePage");
        }
    },
    getComponent(nextState, cb) {
        require.ensure([], (require) => {
            cb(null, require('components/Main'));
        }, 'Main');
    },
    childRoutes: [
        require('./routes/baidu'),
        require('./routes/404'),
        require('./routes/redirect')
    ]
}

getComponent这个方法是异步的，也就是当路由匹配时，才会调用这个方法。
require.ensure方法是webpack提供的方法，这也是按需加载的核心方法。第一个参数是依赖，第二个是回调函数。