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 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设置默认子路由？

1 个答案: