如何生成动态路由reactjs

Question

我正试图从json生成动态路线。

有我的静态路由器

     <Router history={newHistory}>
        <div>
            <Route path="/home" component={HomeComponent}/>
            <Route path="/foo" component={FooComponent}/>
            <Route path="/bar" component={BarComponent}/>
        </div>
    </Router>

在我的json结果中，我得到路线：{home，foo，bar}

在我的情况下，我尝试循环我的标签路线和创建路线没有成功... 任何想法？

我有一个尝试

listRoute(jsonRoute){

    var tmp;
    for (i = 0; i < jsonRoute.length; i++){
        tmp +=  <Route path="/jsonRoute[i]" component={TestComponent}/>;
    }
    return (
        tmp
    )
}

render() {
    return (
        <div>
            <Router history={newHistory}>
                {
                    this.listRoute()
                }
            </Router>
        </div>

    );
}

thx

Answer 1

您需要在listRoute函数中使用数组：

listRoute(jsonRoute){
    var tmp = [];
    for (i = 0; i < jsonRoute.length; i++){
        // you need to concatenate `i` variable as well:
        tmp.push(<Route path={"/" + jsonRoute[i]} component={TestComponent}/>);
    }
    return tmp;
}