javascript - 如何生成动态路由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 结果中我得到了 route:{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>

    );
}

谢谢

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