ReactJS部署GitHub Pages路径异常：图片不加载、路由跳转错误求助

嘿，我来帮你搞定这些GitHub Pages部署的糟心问题！这些都是React项目部署到静态托管平台时的常见坑，咱们一步步拆解解决：

首先检查你的package.json里的homepage字段，必须严格对应你的仓库路径：

"homepage": "https://gultyaev.github.io/test-task/"

或者更简洁的相对路径写法也可以：

"homepage": "/test-task/"

重点是别写错仓库名（test-task），也别漏了首尾的斜杠，这是所有路径问题的基础。

如果用了React Router，默认的BrowserRouter在GitHub Pages上会水土不服——因为GitHub Pages是静态托管，不认识客户端路由规则，直接访问子路径就会404，点击路由还会跳转到根域名。这里有两个靠谱方案：

• 方案一：改用HashRouter
  把代码里的<BrowserRouter>直接换成<HashRouter>，路由会自动带上#前缀，比如变成https://gultyaev.github.io/test-task/#/how-it-works。这种方式最省心，GitHub Pages能完美识别这种路径，不会再跳错。

• 方案二：给BrowserRouter加basename属性
  如果你不想用带#的路由，就给BrowserRouter加上仓库名作为前缀：

  <BrowserRouter basename="/test-task">
    {/* 你的路由组件都放这里面 */}
  </BrowserRouter>
  

  这样所有路由都会自动带上/test-task前缀，点击"How it works"就会跳转到正确的https://gultyaev.github.io/test-task/how-it-works，而不是跑到根域名去。

图片存在public目录下，加载时要避开绝对路径的坑：

• 如果你之前写的是<img src="/image.png" />，部署后会指向https://gultyaev.github.io/image.png，自然找不到。改成下面两种写法之一：

  // 写法1：用public目录占位符（官方推荐）
  <img src="%PUBLIC_URL%/image.png" alt="描述文字" />
  
  // 写法2：相对路径（适合简单场景）
  <img src="./image.png" alt="描述文字" />
  

• 另外，如果是通过import导入图片（比如import myImg from './assets/image.png'），这种写法不用改——webpack会自动根据homepage配置处理路径，本地和部署后都能正常加载。

修改完配置后，一定要重新执行部署命令，避免缓存旧代码：

npm run build
npm run deploy  # 如果你配置的deploy脚本是"gh-pages -d build"的话

如果还是有问题，可以先清空gh-pages分支再重新部署：

git checkout gh-pages
git rm -rf .
git commit -m "清理旧部署文件"
git push origin gh-pages --force
git checkout main
npm run deploy

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