如何使用 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'));
    }
};

我的 objective 是为了让 Console 组件在其任何子路由处于活动状态时始终加载。它将包含一个基于子路由的子组件。我希望异步加载子组件。如果没有子路由 selected.

，我希望 FileManager 子路由也是默认的

因此以下两条路线都将 select 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 documentation.

我也无法弄清楚

如何让 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>
)

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

How do I set a default child route with react-router?

reactjs

react-router