部署到GitHub Pages的React应用空白且报404错误如何解决？

首先你package.json里的homepage配置完全符合要求，不用修改，问题可通过以下步骤逐一排查解决：

• 路由配置不兼容GitHub Pages静态环境

如果你项目中使用了React Router，GitHub Pages作为纯静态站点默认不支持BrowserRouter的history模式，会出现路由资源404的情况，可选择任意一种方案修复：
方案1：将BrowserRouter替换为HashRouter，无需额外配置，刷新页面也不会出现404问题
方案2：保留BrowserRouter，给组件添加basename属性，取值为你的仓库名：

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter basename="/pathfindingvisualizer">
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

• GitHub Pages部署分支配置错误
  进入仓库的Settings→Pages页面，确认Source部分的分支选择为gh-pages，目录选择为/(root)，保存后等待2-3分钟让配置生效。
• 未重新执行部署命令更新资源
  所有配置修改完成后，在本地重新执行npm run deploy命令，等待部署完成后再访问站点测试。
• 浏览器缓存问题
  部署完成后如果还是空白，可按Ctrl+F5强制刷新页面，清除本地缓存的旧资源。

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