Loop through an array to create routes in react router

I want to hit an API which returns me all the routes of the website that I will need for the react website.

I'm not entirely sure on how to do it or even google an example.

My code looks like this:

ReactDOM.render(
<Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute pageId={5} background="" component={Home}/>
      <Route path="/your-journey" background="" pageId={7} component={YourJourney}/>
      <Route path="/designed-for-you" background="" pageId={6} component={DesignedForYou}/>
      <Route path="/join-us" background="" pageId={1} component={JoinUs}/>
      <Route path="/get-in-touch" background="no-hero-image" pageId={4} component={GetInTouch}/>
      <Route path="/legal-and-compliance" background="no-hero-image" pageId={8} component={Legal}/>
      <Route path="/privacy" background="no-hero-image" pageId={9} component={Privacy}/>
    </Route>
  </Router>,
  document.getElementById('root')
);

Where everything under the Route path="/" needs to come from the API.

Simple, just load the data in some action that loads your routes and map over the result in your ReactDOM.render function. It'll look something like this:

// This just maps the component string names (keys) to actual react components (values)
const COMPONENT_MAP = {
  'Privacy': Privacy, // quotes are not necessary, just illustrating the difference a bit more
  // ... other mappings
}

// Some asynch action that loads the routes from your API
getRoutes().then((routes) => {
  ReactDOM.render(
      <Router history={browserHistory}>
        <Route path="/" component={App}>
          <IndexRoute pageId={5} background="" component={Home}/>
          {routes.map((r) => {
             return <Route path={r.path} background={r.bg} pageId={r.pageId} component={COMPONENT_MAP[r.component]}/>
           }}
        </Route>
      </Router>,
      document.getElementById('root')
    );
});