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

Question

我有一个简单的 React Router 处理程序：

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

我认为您应该可以使用 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>
);

Answer 2

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

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

Route.js source and the detailed commit note 中的文档注释可能是您等待官方文档和示例出现时最好看的地方。

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

Externalizing route paths using react-router

reactjs