文章/答案/技术大牛

发布

社区首页 >问答首页 >每个流束分裂反应路由器v3

问每个流束分裂反应路由器v3
EN

Stack Overflow用户

提问于 2017-04-22 21:22:21

回答 1查看 341关注 0票数 1

是否有一种方法可以在中实现每流v3包的拆分？从文档和互联网上的例子来看，有一种分离的方法，但是它是per-component，使用PlainRoute和getChildRoutes，getComponent等等。使用它和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>

如果不能用“反应路由器”来做这件事，我很想知道如何和Webpack一起做好这件事。

webpack

react-router

bundle

reactjs

split

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-04-24 02:11:29

是的!

以下是我在我的项目中是如何做到的：

如果使用普通路由，则在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调用。这样，您就可以将包拆分为三个文件，而不是每个组件。希望这能有所帮助

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43564762

复制

相似问题

问每个流束分裂反应路由器v3
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问每个流束分裂反应路由器v3EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问每个流束分裂反应路由器v3
EN