反応ルータに経路を作成するために配列をループする

Question

私は反応するウェブサイトに必要なウェブサイトのすべてのルートを返すAPIをヒットしたいと思います。

私はそれを行う方法やGoogleの例を完全にはわかりません。

私のコードは次のようになります。ルート・パスの下に=「/」すべてがAPIから来ている必要があります

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

。

Answer 1

シンプルで、ルートをロードして、ReactDOM.render関数の結果をマップするアクションでデータをロードするだけです。これは次のようになります。

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