如何使用react-router设置默认子路由？

Question

我正在使用React-Router 1.0.0-rc3,但我无法理解如何为子路由设置默认路由.

我的rootRoute设置如下:

var rootRoute = {
    component: 'div',
    childRoutes: [{
        path: '/',
        component: require('./components/Console'),
        childRoutes: [
            require('./routes/FileManager'),
            require('./routes/UserManager')
        ]
    }]
};

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

我的控制台根组件设置如下:

module.exports = React.createClass({

    render: function () {
        return (
            <div className="console">
                <ConsoleHeader/>
                {this.props.children}
            </div>
        );
    }

});

我的FileManager路由定义如下:

module.exports = {
    path: 'files',

    getComponent: function (location, callback) {
        callback(null, require('./components/FileManager'));
    }
};

我的目标是在其任何子路由处于活动状态时始终加载控制台组件.它将包含基于子路由的子组件.我想要异步加载子组件.如果没有选择子路由,我希望FileManager子路由也是默认路由.

所以以下两个路由都会选择FileManager组件:

/
/files

我知道这样做的一种方法是做这样的事情:

{this.props.children || require('./routes/FileManager/components/FileManager')}

然而,这感觉不对.我不想从路由定义文件中获取FileManager组件的路径.

也许我可以创建一个默认的子路由条目,如:

{
    path: '/', //Or maybe empty string here since it concatenates to the parent?
    getComponent: function (location, callback) {
        callback(null, require('./components/FileManager'));
    }
}

但这与我已经拥有的路径定义基本相同,只是路径不同.

因此,似乎必须有一种更简洁的方式来指定默认子路由,但即使在浏览API文档之后我也无法弄明白.

如何使FileManager子路由成为默认子路由？

Answer 1

我强烈建议您使用JSX作为路线.它会让事情变得更加容易.

以下是一个例子.

var ConsoleApp = require('./components/Console');
var FileManager = require('./routes/FileManager');
var UserManager = require('./routes/UserManager');
var RootDefault = require(./routes/SomeComponent);

var rootRoute = (
  <Route path="/" component={ConsoleApp}>
    <IndexRoute component={RootDefault}/>
    <Route path="file-manager" component={FileManager}/>
    <Route path="user-manager" component={UserManager}/>
  </Route>
)