javascript - Loop through an array to create routes in react router - Stack Overflow

admin管理员组

文章数量:1290354

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

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

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

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

• javascript
• arrays
• reactjs
• react-router

Share Improve this question Follow asked May 5, 2017 at 14:18 saunderssaunders 98944 gold badges1414 silver badges2525 bronze badges 3

• You can to make the get request prior to rendering router. and use the response to generate route ponent. – Umang Gupta Commented May 5, 2017 at 14:23
• Do you have any links to docs for that? – saunders Commented May 5, 2017 at 14:25
• What have you already tried? Also please note that JSX is just syntactic sugar for React.createElement(...) facebook.github.io/react/docs/jsx-in-depth.html – alpeware Commented May 5, 2017 at 14:26

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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 ponent string names (keys) to actual react ponents (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="/" ponent={App}>
          <IndexRoute pageId={5} background="" ponent={Home}/>
          {routes.map((r) => {
             return <Route path={r.path} background={r.bg} pageId={r.pageId} ponent={COMPONENT_MAP[r.ponent]}/>
           }}
        </Route>
      </Router>,
      document.getElementById('root')
    );
});

本文标签： javascriptLoop through an array to create routes in react routerStack Overflow