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

Question

PlainRoute 路由器逻辑在按如下方式实现时效果很好......

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

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

儿童/ 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
  ]
}

它不再找到孩子 route。

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

Answer 1

在导出功能的Child/index.js中，然后将该功能传递给childRoutes。你真正想要的是从该函数返回的对象。只需调用函数Child()：

childRoutes : [
  Child()
]

或者您可以直接导出对象，而不将其包装在Child/index.js：

中的函数中

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