React Roter v3 API上有什么方法可以使每个流捆绑分割?从文档和互联网上的示例中,可以使用PlainRoute与getChildRoutes,{{{}进行分割,但它是每个组件。与System.imports
一起使用它我会分别为每个路由获得分裂的子包。
我尝试的是这样的,我在开发工具的网络标签中获得了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>
如果使用React Router无法做到这一点,我很感激如何使用Webpack正确地做到这一点。
答案 0 :(得分:2)
是的!
以下是我在项目中的表现:
如果您使用普通路由,请在您的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
在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个“路由”文件,您使用3个System.import语句来引入其childRoutes。您可以在每个路径文件中放置任意数量的组件,但只有3个捆绑包,因为您只有3个System.import调用。这样,您可以将捆绑包分成三个文件而不是每个组件。希望这有帮助