Question

我使用了webpack @ beta和react-router@3.0.0，使用react-router文件配置了代码拆分。

配置完成后，我的组件最初呈现。

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

我的一条路线如下：<Route path="shopper-center" getComponent={() => System.import('./ShopperCenter').then(c => c.ShopperCenter)}/>，反应路由器历史记录为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支持，在这种情况下，您不再需要使用回调函数。

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

1 个答案: