React应用通过gh-pages部署至GitHub Pages后无法显示问题排查

• 基础路径未配置
  React默认从根路径加载资源，但GitHub Pages项目部署在用户名.github.io/项目名子路径下。若未在package.json中添加"homepage": "https://smriti-sk.github.io/Expense-Tracker-App"（或通用的"homepage": "."），构建后的资源会从根路径请求，导致404。

• 路由配置不兼容
  使用React Router时，默认BrowserRouter在静态托管环境下无法处理子路由访问/刷新场景，会触发404。需改用HashRouter，或给BrowserRouter设置basename="/Expense-Tracker-App"属性，同时检查路由路径拼写是否正确。

• 构建产物推送不完整
  检查gh-pages分支是否包含完整的build文件夹内容。执行npm run deploy可能因网络或命令失败导致推送不全，可手动切换到gh-pages分支，确认index.html及static目录下的js、css文件是否存在且路径正确。

• 静态资源路径生成错误
  查看控制台404的具体资源路径，若请求的是/static/js/xxx.js而非/Expense-Tracker-App/static/js/xxx.js，说明构建时资源路径未适配子路径，根源还是homepage字段未配置。

• GitHub Pages部署状态异常
  进入仓库的Settings -> Pages页面，检查部署是否成功、有无报错。偶尔会出现部署延迟或权限问题，导致资源未被正确托管。

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