Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/iphone/43.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs 如何使用react router设置默认子路由?_Reactjs_React Router - Fatal编程技术网

Reactjs 如何使用react router设置默认子路由?

Reactjs 如何使用react router设置默认子路由?,reactjs,react-router,Reactjs,React Router,我使用的是React Router 1.0.0-rc3,但我在理解如何为子路由设置默认路由时遇到问题 我有如下rootRoute设置: var rootRoute = { component: 'div', childRoutes: [{ path: '/', component: require('./components/Console'), childRoutes: [ require('./route

我使用的是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>
        );
    }

});
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'));
    }
}
但这基本上与我已有的路由定义相同,只是路径不同

因此,似乎必须有一种更干净的方法来指定默认的子路由,但即使在浏览了


如何使FileManager子路由成为默认的子路由?

我强烈建议对路由使用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>
)
var ConsoleApp=require('./组件/控制台');
var FileManager=require(“./routes/FileManager”);
var UserManager=require('./routes/UserManager');
var RootDefault=require(./routes/SomeComponent);
var rootRoute=(
)
我刚才读到了,我觉得自己很愚蠢,因为我没有意识到这本质上是早期版本的默认路线。我会考虑你的JSX建议。谢谢