Create React routes dynamically

Question

I have a React App which need to create Routes dynamically when the back End push a model with the routes in JSON form so you have something like :

{
  "Route1": [
    { "id": 1, "visible": true, "other_data": "..." }
  ],
  "Route3": [
    { "id": 2, "visible": false, "other_data": "..." }
  ],
  "Route4": [
    { "id": 3, "visible": true, "other_data": "..." }
  ]
}

And when I receive this model I have to create the navigation stuff of my app Dynamically and associate a specific page (with a bunch of components ) to each route, all this have to be done dynamically as I don't know the shape of my routes when the app starts.

So I just want to know if is there any ready to use solution for this kind of situation ( in angular I used to use ui-router future state ) otherwise any technical solution with the right tools is very welcome ( redux-saga maybe ? ) as I'm really lost ...

Answer 1

I confirm that you can use react-router and browserhistory to push the URL you receive when you get your answer from the API.

Something like that :)

var ReactRouter = require('react-router');
var browserHistory = ReactRouter.browserHistory;

apiRequest().then(browserHistory.push(URL));