我的组件最初是在配置代码拆分后呈现的

Question

我用的是webpack@beta和react-router@3.0.0，用react-router文档配置了code splitting。

配置后，我的组件开始渲染。

我的组件将在 componentDidMount 上获取数据并渲染数据，初始渲染只显示一个空的 div，所以我只得到一个空的 div.

我的一条路线是这样的：<Route path="shopper-center" getComponent={() => System.import('./ShopperCenter').then(c => c.ShopperCenter)}/>，react-router 历史记录是 browserHistory

更新 1： 我已经试过了<Route path="shopper-center" getComponent={(nextState, cb) => System.import('./ShopperCenter').then(c => cb(null,c.ShopperCenter))}/>，它对我不起作用。

更新 2： 我有另一个组件，它只是输出文本，因此该组件可以很好地进行代码拆分。

Answer 1

异步加载组件需要使用 callback argument.

<Route
  path="shopper-center"
  getComponent={(nextState, cb) => {
    System.import('./ShopperCenter')
      // if you export default, you need to import default
      .then(c => cb(null, c.default))
  }}
  />

编辑好像有一个 merged pull request 为 getComponent 添加了 Promise 支持，这样你就不用再使用回调函数了.

我的组件最初是在配置代码拆分后呈现的

My component is rendered initially after configured code splitting

react-router

webpack-2