Routen im react-Router modularisieren

Question

Gibt es eine Möglichkeit mit react-router Ihre Routen zu modularisieren, diese dann einfach zu importieren und zu assemblieren?

Anstatt also diese:

<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> 

Sie so etwas tun könnte:

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> 

ich: Warning: Location did not match any routes

Answer 1

Eine Lösung besteht darin, sie in Variablen zu wickeln:

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")) 

Hinweis: Sie sollten in der Render-Methode von Eltern Routen {this.props.children}

Answer 2

setzen erinnern Wenn Sie Ihre Routen bei Bedarf zu laden, können Sie das automatisch tun, wenn Sie Webpack verwenden.

Hier ist die komplette Anleitung: Automatic Code Splitting for React Router

Um es zusammenzufassen, können Sie Ihre Routen nach oben mit Getter Funktionen einstellen würde, die automatisch Stücke laden würde, wenn nötig.

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

Ja, Sie können, aber es ist eine Art von Hacky - aufgrund der Hacky Natur des Router v3 reagieren. Siehe meine Antwort zu einer ähnlichen Frage:

React-router import routes