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が使用されています。あなたのChild/index.jsあなたが関数をエクスポートが、その後、あなたはchildRoutesにその関数に渡すには

Answer 1

：そして、プロジェクト構造は次のようです。あなたが本当に望むのは、その関数から返されるオブジェクトです。ただ、機能Child()を呼び出す：

childRoutes : [ 
    Child() 
] 

それとも、Child/index.js内の関数でラップせずに直接オブジェクトをエクスポートすることができます。

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