部署React应用至Github Pages时请求错误URL问题

1. 确认package.json配置准确性 #

确保homepage字段设置无误，格式可选以下两种：

"homepage": "https://migars123.github.io/react-league-champs"

或相对路径形式：

"homepage": "/react-league-champs"

同时检查部署脚本，先确认已安装gh-pages依赖，再保证scripts字段包含：

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

未安装依赖的话先执行：

npm install gh-pages --save-dev

2. 显式指定PUBLIC_URL环境变量 #

如果build时路径前缀未自动注入，可在build脚本中强制指定：

"scripts": {
  "build": "PUBLIC_URL=/react-league-champs react-scripts build"
}

之后重新执行npm run build和npm run deploy。

3. 检查public/index.html资源引用 #

确保所有静态资源（图标、样式等）都使用%PUBLIC_URL%前缀，比如：

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="stylesheet" href="%PUBLIC_URL%/css/style.css" />

该变量会在build阶段自动替换为你设置的homepage路径，避免硬编码绝对路径。

4. 验证gh-pages分支内容 #

部署完成后，查看仓库的gh-pages分支，确认assets文件夹存在，且index.html中的script标签路径包含项目前缀，示例：

<script src="/react-league-champs/assets/index-1acd6362.js"></script>

若路径仍错误，可删除gh-pages分支后重新部署：

git branch -D gh-pages
npm run deploy

5. 路由适配（若使用React Router） #

如果应用用到React Router，需改用HashRouter替代BrowserRouter——GitHub Pages不支持单页应用的客户端路由刷新，这也可能引发空白问题：

import { HashRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        {/* 你的路由配置 */}
      </Routes>
    </Router>
  );
}

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