React应用部署到GitHub Pages后显示空白页 配置basename仍未解决求助

问题原因及解决方案 #

你遇到的空白页问题是由GitHub Pages用户站点的配置错误导致的，按以下步骤修改即可恢复正常：

• 修正package.json中的homepage字段
  你当前的homepage多了一级仓库名后缀，oneknucklehead.github.io属于用户级GitHub Pages站点，不需要在路径后加仓库名，修改为：

  "homepage": "https://oneknucklehead.github.io",
  

• 修正部署命令
  用户级GitHub Pages默认读取main分支根目录的静态资源，原部署命令会将打包产物推送到gh-pages分支导致平台无法读取资源，修改scripts中的deploy字段：

  "deploy": "gh-pages -d build -b main",
  

• 调整路由配置
  之前为BrowserRouter添加的子路径basename可以删除，或直接设置为basename="/"即可。

修改完成后重新执行npm run deploy部署，等待2-3分钟平台更新缓存后，清除浏览器缓存即可正常访问页面。

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