react-router hash mode 转为 history mode 踩坑记

今天老板让我把 hash mode 改为 history mode

我想这还不简单吗

import {HashRouter as Router} from 'react-router-dom';
<Router hashType="noslash">
    <App />
</Router>

// ----- 转化为----

import {BrowserRouter as Router} from 'react-router-dom';
<Router>
    <App />
</Router>

结果你猜怎么着，点击到某个路由，手动刷新后白屏了。

• Q：为啥会白屏呢？
• A：是因为 html 里引用的 js 找不到了
• Q：为啥 hash router 找得到对应的 js 文件，history router 就找不到呢？

在 hash 模式下，当前路由为http://localhost::8080/#/square/publish 其查找的是根路径下的文件，所以能正确命中对应的资源。

而在 history 模式下，当前路由为http://localhost::8080/square/publish

经测试，http://localhost::8080/square/publish 路径下放的资源，它会在http://localhost::8080/square/ 这个路径下查找。也就是说，在这个设置下，资源路径为相对于当前目录的地址，我们需要将其变为相对于根路径的地址。

那么这个经过 webpack 编译后html 文件中 script 的 src 是哪里来的呢，让我们看看 webpack 源码

  // eslint-disable-next-line no-unused-vars
  function hotDownloadUpdateChunk(chunkId) {
      var script = document.createElement("script");
      script.charset = "utf-8";
      script.src = $require$.p + $hotChunkFilename$;
      if ($crossOriginLoading$) script.crossOrigin = $crossOriginLoading$;
      document.head.appendChild(script);
  }

  ...

  const publicPath = this.getPublicPath({
            hash: hash
        });
        buf.push("");
        buf.push("// __webpack_public_path__");
        buf.push(`${this.requireFn}.p = ${JSON.stringify(publicPath)};`); // 这里就是上面的 $require$.p
        return Template.asString(buf);
    });

  this.requireFn = "__webpack_require__";

由源码可知，script.src 是经由 $require$.p + $hotChunkFilename$ 拼接而来的，查找 $require$.p 赋值的位置可得，其来源于 publicPath ，由此可得我们修改 webpack 配置

output: {
    publicPath: '/',
},

就可将 <script src="[name].[hash:8].bundle.js" /> 转化为 <script src="/[name].[hash:8].bundle.js" />，那么它查找的路径便是相对于根路径，就能正确找到对应的 js 资源了。