React项目部署GitHub Pages后显示空白页，疑HashRouter引发问题

针对你这个情况，直接给几个必查的点，按顺序来：

• 补全package.json的homepage配置
  打开项目根目录的package.json，必须加一行：

  "homepage": "/test1/"
  

  这是React项目部署到非根路径GitHub Pages的必要配置，不加的话构建出来的资源路径全是错的，浏览器加载不到JS/CSS，自然空白。

• 修正HashRouter的basename
  既然你怀疑路由问题，检查HashRouter的配置：

  import { HashRouter } from 'react-router-dom';
  
  ReactDOM.render(
    <HashRouter basename="/test1/">
      <App />
    </HashRouter>,
    document.getElementById('root')
  );
  

  因为你的部署路径是/test1/，必须给路由加上这个前缀，不然路由匹配会出问题。

• 检查构建和部署流程

  • 先执行npm run build生成build文件夹；
  • 确保把build里的所有内容推到了gh-pages分支（或仓库设置里指定的部署分支）；
  • 去仓库的Settings -> Pages里确认，部署来源是gh-pages分支的根目录，不是其他路径。

• 通过浏览器控制台找线索
  打开部署页面按F12，查看Console和Network标签，要是有404报错，直接对应资源路径问题，能快速定位根源。

先把这几步做完，基本能解决大部分GitHub Pages空白的问题。

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