CODEWITHSUNDEEP
javascriptreactjsreact-router
tetar
tetar

Reputation: 872

how generate dynamic route reactjs

i am trying to generate dynamic route from json.

there is my static router

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

in my json result i get route:{home,foo,bar}

in my case i try to loop on my tab route and creat route without succes ... any idea ?

there is one of my try

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

Upvotes: 1

Views: 58

Answers (1)

1ven
1ven

Reputation: 7036

You need to use an Array in listRoute function:

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

Upvotes: 2

Related Questions