React PWA部署到gh-pages后开始渲染随即报404错误，求解决方案

你遇到的“页面先渲染再跳转404”的表现，基本可以确定是子路径适配或者路由配置问题，可按以下步骤排查：

• 检查package.json的homepage配置
  确保项目根目录的package.json中添加了正确的homepage字段，值为你的gh-pages站点地址，示例配置如下：

  "homepage": "https://evandersloot.github.io/meet-app"
  

  也可以简写为"homepage": "."，打包时会自动适配相对路径。
• 修正React Router的basename配置
  GitHub Pages站点托管在域名的子路径/meet-app/下，如果你使用BrowserRouter，必须指定basename参数，否则路由会从域名根路径匹配，找不到对应路径就会跳转404。修改路由配置如下：

  // 替换原来的<BrowserRouter>
  <BrowserRouter basename={process.env.PUBLIC_URL}>
    {/* 原有路由内容 */}
  </BrowserRouter>
  

  如果你不想配置basename，也可以直接将BrowserRouter替换为HashRouter，哈希路由不需要服务端适配，也能避免该问题。
• 配置404.html重定向规则
  GitHub Pages是静态文件服务，默认不支持单页应用的客户端路由，直接访问子路由会返回404。你可以将打包生成的index.html复制一份，重命名为404.html，放在打包输出的根目录，部署时一同上传，所有找不到文件的请求都会返回该404.html的内容，客户端路由就能正常匹配。
• 检查打包与部署路径配置
  本地执行npm run build后，确认build文件夹下直接存在index.html和static资源文件夹，没有嵌套多余的目录。如果你使用gh-pages包部署，确保部署命令指定的目录正确：

  npx gh-pages -d build
  

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