React应用部署至GitHub Pages后显示空白页问题求助

• 检查package.json的homepage配置
  一定要在package.json里添加正确的homepage字段，你的情况应该设置为 "homepage": "https://hariprakash-va.github.io/Todolist/"。缺失这个配置的话，React生成的静态资源路径会出错，导致页面加载不到内容。

• 路由配置修正（若使用React Router）
  如果项目用了React Router，需要给BrowserRouter添加basename属性，值为仓库名，也就是 <BrowserRouter basename="/Todolist">。否则路由会从根路径匹配，找不到对应的页面组件。

• 确认部署脚本正确性
  在package.json的scripts中，必须包含这两个命令：

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

  这样能确保部署的是build目录下的编译后静态文件，而不是项目源码。

• 查看浏览器控制台定位问题
  打开部署后的页面，按F12调出开发者工具，查看Console和Network标签：

  • 若出现静态资源404错误，就是路径配置问题，对应调整homepage。
  • 若有路由相关报错，检查basename是否设置正确。
  • 若有JS报错，根据报错信息排查对应代码问题。

• 检查gh-pages分支内容
  确认你的gh-pages分支里是build目录的所有文件，而不是项目源码。如果分支里是源码，GitHub Pages无法解析，自然显示空白。

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