已部署的React App显示空白页且控制台返回404错误如何解决

• 检查package.json的homepage配置
  必须在package.json顶层添加与你的部署地址匹配的homepage字段，配置示例：

  "homepage": "https://toyosicodes.github.io/memory-game"
  

  该字段要和name、dependencies等字段同级，不可写在其他配置块内部。
• 路由规则适配
  如果项目使用了react-router：
  • 若用BrowserRouter，需要给组件添加basename属性，值为你的仓库名：

    <BrowserRouter basename="/memory-game">
      {/* 你的路由规则 */}
    </BrowserRouter>
    

  • 也可以直接替换为HashRouter，GitHub Pages原生支持哈希路由，不需要额外配置服务端规则。
• 静态资源路径修正
  所有public目录下的静态资源引用，不要使用根路径绝对地址，建议用process.env.PUBLIC_URL拼接路径，示例：

  <img src={`${process.env.PUBLIC_URL}/logo.png`} alt="logo" />
  

• 部署配置校验
  确认使用gh-pages包部署时的脚本配置正确，在package.json的scripts中添加：

  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
  

  同时进入仓库的Settings → Pages设置页，确认部署源选择的是gh-pages分支的/root目录，而非main分支。
• 本地打包验证
  先本地执行npm run build生成打包产物，直接打开build目录下的index.html，若本地打开就出现空白或者404报错，先修正打包配置问题后再执行部署操作。

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