2015-02-23 157 views
0

外部化路由路径我有一个简单阵营路由器处理程序:使用反应路由器

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> 
); 

我想外部化第1页,第2页,第3页在一个单独的文件属性(比如一个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> 
); 

很显然,我不能有路线之内这样的结构,什么是实现这一目标的方式做出反应?

或者有没有办法通过API改变路线?

对于如:

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

回答

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> 
); 
+0

谢谢你,那个语法做到了。虽然我不得不对原始代码做一些修改,因为Browserify无法动态加载require模块(它会进行静态分析)。 请参阅http://stackoverflow.com/questions/26434214/require-in-browserify-doesnt-work-variable-name。 因此,最终语法是handler = {r.module},其中r.module = require('page1') – vasya10 2015-02-24 00:57:37

2

反应路由器刚添加顶层API在0.12.2版本定义不JSX路线:

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

Route.js源的文档注释和详细commit note可能是在您等待官方文档和示例出现时查看的最佳位置。