React Router v3每流束分裂

Question

React Roter v3 API上有什麼可用的方法來實現每流束分裂？從文檔和互聯網上的例子，有一種方法來拆分，但它是每個組件，使用PlainRoute與getChildRoutes,getComponent等。使用它與System.imports我分別爲每個路由獲得拆分子束。

我試過的是這樣的，我在開發工具的Network標籤中獲得了0.js, 1.js ... 9.js塊。

getChildRoutes(_, fetchComponents) { 
    Promise.all([ 
     System.import('./pages/page1.jsx'), 
     System.import('./pages/page2.jsx'), 
     ... 
     System.import('./pages/page10.jsx') 
    ]) 
    .then(([page1, page2... page10]) => { 
     fetchComponents(null, [ 
      {path: '...', indexRoute: {component: page1}}, 
      {path: '...', component: page2}, 
      ... 
      {path: '...', component: page10} 
     ]) 
    }) 
} 

那麼有可能這樣的結構只有3個塊（子包）？

<Router ...> 
{/*flow 1*/} 
    <Rote component...> 
    <Route path... component... /> 
    <Route component> 
     <IndexRoute .../> 
     <Route path ... component... /> 
     <Route path ... component... /> 
     <Route path ... component... /> 
     ... 
    </Route> 
    </Route> 

{/*flow 2*/} 
    <Route> 
    ... 
    </Route> 

{/*flow 3*/} 
    <Route /> 
</Router> 

如果這是不可能做出反應路由器做到這一點，我會很感激任何提示如何做到這一點用的WebPack正常。

Answer 1

是的！

這是我如何做了它在我的項目：

您router.js內部文件，如果你使用普通路線：

const componentRoutes = { 
    path: '/', 
    childRoutes: [ 
    { 
     path: 'routeA', 
     getChildRoutes (partialNextState, callback) { 
     System.import('./aRoutes') 
      .then(module => callback(null, module.default)) 
     } 
    }, 
    { 
     path: 'routeB', 
     getChildRoutes (partialNextState, callback) { 
     System.import('./bRoutes') 
      .then(module => callback(null, module.default)) 
     } 
    }, 
    { 
     path: 'routeC', 
     getChildRoutes (partialNextState, callback) { 
     System.import('./cRoutes') 
      .then(module => callback(null, module.default)) 
     } 
    }, 
    ] 
} 
const Routes =() => { 
    return (
    <Router history={browserHistory} routes={componentRoutes} /> 
) 
} 

export default Routes 

內aRoutes.js：

import aDashboard from './containers/aDashboard' 
import SomePage from './containers/SomePage' 
const aRoutes = [ 
    { 
    path: 'aDashboard', 
    component: aDashboard 
    }, 
    { 
    path: 'somePage', 
    component: SomePage 
    } 
] 

export default aRoutes 

Inside bRoutes.js：

import bDashboard from './containers/bDashboard' 
import SomePageB from './containers/SomePageB' 

const bRoutes = [ 
    { 
    path: 'bDashboard', 
    component: bDashboard 
    }, 
    { 
    path: 'somePageB', 
    component: SomePageB 
    } 
] 

export default bRoutes 

個

內cRoutes.js：

import cDashboard from './containers/cDashboard' 
import SomePageC from './containers/SomePagec' 

const cRoutes = [ 
    { 
    path: 'cDashboard', 
    component: cDashboard 
    }, 
    { 
    path: 'somePageC', 
    component: SomePageC 
    } 
] 

export default cRoutes 

因此，對於你的情況我會是你用3個System.import報表在其childRoutes拉3「路線」的文件。您可以將任意數量的組件放入每個路徑文件中，但只有3個軟件包，因爲您只有3個System.import調用。通過這種方式，您可以將您的套件分成只有三個文件而不是每個組件。希望這可以幫助