Question

我有一个简单的React Router Handler：

var routes = (
    <Route name="main" path="/" handler={require('./main')}>
        <Route name="page1" path="/page1" handler={require('./page1')}/>
        <Route name="page2" path="/page2" handler={require('./page2')}/>
        <Route name="page3" path="/page3" handler={require('./page3')}/>

        <DefaultRoute handler={require('./signin')}/>
    </Route>
);

我希望将page1，page2，page3属性外部化为一个单独的文件（比如一个json文件）并在路由中迭代它。像这样：

var routes = (
  <Route name="main" path="/" handler={require('./main')}>
    _.each (routes, function(r) {
      <Route name={r.name} path={r.path} handler={require(r.module)}/>
    });

    <DefaultRoute handler={require('./main')}/>
  </Route>
);

显然我不能在路线中有这样的构造，实现这个的React方法是什么？

或者有没有办法通过api改变路线？

例如：

routes.addRoute({name: r.name, path: r.path, handler: r.module}) ?

Answer 1

react-router刚刚添加了顶级API，用于在版本0.12.2中定义没有JSX的路由：

Router.createRoute()
Router.createDefaultRoute()
Router.createNotFoundRoute()
Router.createRedirect()

在您等到官方文档和示例出现之前，Route.js来源和详细commit note中的文档注释可能是最佳观看位置。

Answer 2

我认为您应该可以使用jsx执行此操作，但jsx语法中存在错误。试试这个：

var routes = (
  <Route name="main" path="/" handler={require('./main')}>
    {
     _.each (routes, function(r) {
         return <Route name={r.name} path={r.path} handler={require(r.module)}/>;
     });
    }
    <DefaultRoute handler={require('./main')}/>
  </Route>
);

使用react-router外部化路由路径

2 个答案: