Webpack 2 + React - 使用 System.import 进行代码拆分时的嵌套路由

Posted 2023-02-21

【中文标题】Webpack 2 + React - 使用 System.import 进行代码拆分时的嵌套路由

【英文标题】：Webpack 2 + React - nested routes when code splitting with System.import

【发布时间】：2016-12-08 08:08:21

【问题描述】：

我有一个基于http://moduscreate.com/code-splitting-for-react-router-with-es6-imports/ 文章的应用程序。我添加了一些子路由，现在我的路由器配置如下：

function errorLoading(err) 
  console.error('Dynamic page loading failed', err);


function loadRoute(cb) 
  console.log('load route called');
  return (module) => cb(null, module.default);


const obj = 
  component: App,
  childRoutes: [
    
      path: '/',
      getComponent(location, cb) 
        System.import('pages/Home')
          .then(loadRoute(cb))
          .catch(errorLoading);
      
    ,
    
      path: '/gsgs',
      getComponent(location, cb) 
        System.import('pages/Gsgs')
          .then(loadRoute(cb))
          .catch(errorLoading);
      ,
      childRoutes: [
        
          path: 'go',
          getComponent(location, cb) 
            System.import('pages/Gsgs/Home.js')
              .then(loadRoute(cb))
              .catch(errorLoading);
          ,
        
      ]
    ,
    
      path: '/about',
      getComponent(location, cb) 
        System.import('pages/About')
          .then(loadRoute(cb))
          .catch(errorLoading);
      
    ,
  ]
;

/index、/about 和 /gsgs 路由可以很好地触发动态代码加载。但是 /gsgs/go 使用

触发 404

bundle.js:2 动态页面加载失败错误：加载块 0 失败了。(…)

我做错了什么？我正在使用

"webpack": "^2.1.0-beta.4",
"webpack-dev-server": "^2.0.0-beta"

【问题讨论】：

不确定为什么会出现错误，但请注意您可以使用 JSX 元素来设置路由，而不是使用变得难以管理的大对象。

是的，我知道路由器的 jsx 元素，我发现对象表示法更简洁，更易于阅读

【参考方案1】：

我已尝试在博客文章中重现该问题，但似乎有问题。我已尝试解决此问题，但我无法再看到该错误。

你可以参考这个commit，它对当前主路由有变化，我可以动态加载子路由。

如果您再次遇到问题，请告诉我。如果您有可以重现该问题的示例 repo，那就太好了，我很乐意调试。

乐于助人。

【讨论】：

这似乎解决了它。您认为问题出在哪里？

所以现有代码存在一些问题。 1) webpack2 没有更新依赖关系 2) html 绝对路径。在解决它们并添加子路由之后，它似乎工作正常。如果这解决了你的问题，如果你能接受这个答案，那就太好了。谢谢。

原来它失败了，因为我没有将publicPath指定为'/'。我认为其余的都很好。谢谢米希尔

【参考方案2】：

检查您的配置文件（在我的情况下为 webpack.config.dev.js 文件）并检查 publicPath 并将其设置为 '/'。例如：publicPath: '/'。

你需要像这样在output中设置

output: path: __dirname, filename: 'app.js', publicPath: '/', /*publicPath: 'http://0.0.0.0:8000/',*/

我遇到了这个错误

   `http://0.0.0.0:8000/0.app.js
    Error: "Loading chunk 0 failed."`

并通过将publicPath: 'http://0.0.0.0:8000/' 更改为publicPath: '/' 解决。