Loop through an array to create routes in react router

arrays, javascript, react-router, reactjs

Solution

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

Problem

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.

Original source