反応ルータのルートをモジュール化する

Question

反応ルータがルートをモジュール化し、それらをインポートして組み立てる方法はありますか？

ので、代わりにこの：

<Router> 
    <Route path="/" component={App}> 
     <Route path="inbox" component={Inbox}> 
     <Route path="messages/" component={AllMessages} /> 
     <Route path="messages/:id" component={Message} /> 
     </Route> 
     <Route path="calendar" component={Calendar}> 
     <Route path="year" component={Year}> 
      <Route path="month" component={Month}> 
      <Route path="week" component={Week}/> 
      </Route> 
     </Route> 
     </Route> 
    </Route> 
    </Router> 

は、あなたがそのようなこと行うことができます：

let InboxRoutes = React.createClass({ 
    render: function(){ 
    return (
     <Route path="inbox" component={Inbox}> 
     <Route path="messages/" component={AllMessages} /> 
     <Route path="messages/:id" component={Message} /> 
     </Route> 
    ); 
    } 
}); 

<Router> 
    <Route path="/" component={App}> 
     <InboxRoutes/> 
     <CalendarRoutes/> 
    </Route> 
    </Router> 

を私が手： Warning: Location did not match any routes

Answer 1

一つの解決策は、変数でそれらをラップすることです。

let InboxRoutes = (
    <Route path="inbox" component={Inbox}> 
     <Route path="messages/" component={AllMessages} /> 
     <Route path="messages/:id" component={Message} /> 
    </Route> 
) 

let CalendarRoutes = (/* define routes like above */) 

let routes = (
    <Router> 
     <Route path="/" component={App}> 
      {InboxRoutes} 
      {CalendarRoutes} 
     </Route> 
    </Router> 
) 

render(routes, document.getElementById("app")) 

注：あなたはオンデマンドであなたのルートをロードしたい場合は、WebPACKのを使用している場合、あなたは自動的にそれを行うことができ、親ルートのレンダリング方法{this.props.children}

Answer 2

に置くことを覚えておいてください。

ここで完全なガイドです：Automatic Code Splitting for React Router

がそれを要約すると、あなたが必要なときに自動的にチャンクをロードするゲッター機能を使用してルートを設定したいです。

import App from 'containers/App'; 
 
function errorLoading(err) { 
 
    console.error('Dynamic page loading failed', err); 
 
} 
 
function loadRoute(cb) { 
 
    return (module) => cb(null, module.default); 
 
} 
 
export default { 
 
    component: App, 
 
    childRoutes: [ 
 
    { 
 
     path: '/', 
 
     getComponent(location, cb) { 
 
     System.import('pages/Home') 
 
      .then(loadRoute(cb)) 
 
      .catch(errorLoading); 
 
     } 
 
    }, 
 
    { 
 
     path: 'blog', 
 
     getComponent(location, cb) { 
 
     System.import('pages/Blog') 
 
      .then(loadRoute(cb)) 
 
      .catch(errorLoading); 
 
     } 
 
    } 
 
    ] 
 
};

Answer 3

はい、できますが、それは一種のハックだ - による反応ルータV3のハック性質のために。同様の質問で私の答えを見てください：

React-router import routes