React应用部署至GitHub Pages后出现白屏问题该如何解决？

问题根因 #

你的GitHub Pages部署在子路径/meme-page/下，但React默认构建产物会请求站点根路径下的静态资源，报错中请求的https://z0onic.github.io/static/js/2.0b197680.chunk.js实际应该访问https://z0onic.github.io/meme-page/static/js/2.0b197680.chunk.js，路径不匹配导致资源加载失败触发白屏。本地npm start运行正常是因为本地服务跑在根路径下，没有子路径适配需求。

修复步骤 #

• 第一步：检查项目根目录package.json文件，确认新增的homepage字段配置完全符合以下内容，注意不要漏末尾的斜杠，也不要写错仓库名：

  "homepage": "https://z0onic.github.io/meme-page/"
  

• 第二步：如果项目中使用了React Router，需要给路由根组件添加basename配置，示例如下，未使用路由可跳过该步：

  <BrowserRouter basename="/meme-page">
    {/* 原有路由内容 */}
  </BrowserRouter>
  

• 第三步：删除本地已生成的build文件夹，重新执行部署命令npm run deploy，等待命令执行完成。
• 第四步：部署完成后等待2-3分钟让GitHub Pages缓存更新，清空浏览器缓存后再次访问页面即可正常加载。
• 可选验证：可在GitHub仓库的gh-pages分支下查看index.html文件，确认内部引用的js、css资源路径开头都带有/meme-page/前缀，代表路径配置已生效。

内容的提问来源于stack exchange，提问作者Vynpai