Reactjs 网页包代码拆分，如果从单独的文件导入，则找不到System.import路由

当按如下方式实现时，

普通路由

路由器逻辑可以完美工作

const componentRoutes = {
  component   : Home,
  path        : '/',
  indexRoute  : Index,
  childRoutes : [
    {
      path: 'child',
      getComponent(location, cb) {
        System.import('./Child/components/child')
          .then(module => cb(null, module.default))
      }
    }
  ]
}

但是，当我试图在一个单独的文件中声明

Child/index.js

export default () => ({
  path: 'child',
  getComponent(location, cb) {
    System.import('./components/child')
      .then(module => cb(null, module.default))
  }
})

并且做：

import Child from './Child'

const componentRoutes = {
  component   : Home,
  path        : '/',
  indexRoute  : Index,
  childRoutes : [
    Child
  ]
}

它不再找到子路径

路径

HashHistory用作路由器的历史记录。项目结构如下：

---

在您的

Child/index.js中导出一个函数，然后将该函数传递给
childRoutes
。您真正想要的是从该函数返回的对象。只需调用函数
Child（）
：

或者，您可以直接导出对象，而无需将其包装在
Child/index.js
中的函数中：

export default {
  path: 'child',
  getComponent(location, cb) {
    System.import('./components/child')
     .then(module => cb(null, module.default))
  }
}

export default {
  path: 'child',
  getComponent(location, cb) {
    System.import('./components/child')
     .then(module => cb(null, module.default))
  }
}