React应用部署GitHub Pages出现异常重定向如何解决

• 推送至gh-pages分支的构建产物为Create React App初始化默认模板：配置完部署脚本后如果未清理历史构建缓存，predeploy执行build时可能残留首次初始化项目时生成的默认React欢迎页文件，最终推送到远程分支的静态资源并非你编写的业务代码，访问时自然加载默认React页面。
• GitHub Pages部署源配置错误：仓库设置中未将Pages部署源指向gh-pages分支根目录，误选main分支的public目录作为部署源——而public目录默认存放的就是CRA自带的模板index.html、React标识等静态资源，访问时会直接返回默认模板内容。
• 路由配置不匹配子路径：项目使用react-router-dom的BrowserRouter时未配置basename参数适配/mh-app/的仓库子路径，路由匹配失败时可能触发默认页fallback；另外浏览器本地缓存、GitHub Pages CDN缓存也可能导致首次部署后加载旧的默认资源。

• 第一步清理本地构建缓存：在项目根目录执行命令删除旧的build目录，类Unix系统执行rm -rf build，Windows系统执行rd /s /q build，同时确认src目录下的入口组件已经替换掉CRA初始化生成的默认欢迎页代码，没有残留模板内容。
• 校验package.json配置准确性，确保相关字段和脚本符合以下标准：

{
  "homepage": "https://joe-dp.github.io/mh-app/",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
}

注意deploy脚本中-d参数必须指向CRA默认的打包输出目录build，不要错写为其他自定义目录名。

• 修正GitHub Pages部署源配置：打开对应仓库的Settings页面，找到Pages设置项，在Source板块将部署分支选为gh-pages，部署目录选为/(root)，保存后等待1-2分钟让配置生效。
• 适配路由规则：如果项目使用React Router，优先将BrowserRouter替换为HashRouter适配GitHub Pages的静态托管规则；如果要保留BrowserRouter，必须给组件添加basename属性：<BrowserRouter basename="/mh-app">，匹配项目的子访问路径。
• 重新执行npm run deploy命令，部署完成后按Ctrl+F5强制清空浏览器缓存刷新页面，避免本地缓存加载旧资源。

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