प्रतिक्रिया-राउटर

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

ध्यान दें: आप माता-पिता मार्गों {this.props.children}

Answer 2

आप मांग पर अपने मार्गों लोड करने के लिए चाहते हैं की विधि प्रस्तुत करना में डालने के लिए याद रखना चाहिए, आप स्वचालित रूप से अगर आप Webpack का उपयोग कर सकते हैं।

यहाँ पूरा गाइड है: 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

हाँ आप कर सकते हैं, लेकिन यह एक तरह से hacky है - रूटर v3 प्रतिक्रिया की hacky प्रकृति के कारण। एक ही प्रश्न पर मेरा उत्तर देखें:

React-router import routes