如何将主分支子目录中的React项目部署至GitHub Pages？

针对你的项目结构（React代码全部在app/子目录），按以下步骤排查修复：

1. 配置正确的打包与部署脚本
   在项目根目录的package.json中，补充或修改以下脚本：

   {
     "homepage": "http://myUserName.github.io/name-of-the-app",
     "scripts": {
       "build": "cd app && react-scripts build",
       "predeploy": "npm run build",
       "deploy": "gh-pages -d app/build"
     }
   }
   

   关键细节：

   • build命令进入app目录执行打包，确保产物生成在app/build
   • deploy命令指定将app/build下的所有文件推送到gh-pages分支的根目录

2. 安装gh-pages依赖
   如果还没安装，执行：

   npm install gh-pages --save-dev
   

3. 调整GitHub Pages设置
   进入仓库的Settings → Pages页面：

   • 部署分支选择gh-pages
   • 部署目录选择/root（不要选/docs，我们的打包产物不在docs目录）
     保存设置后等待几分钟让GitHub完成部署。

4. 清理缓存重新部署
   执行以下命令清空旧缓存并重新部署：

   rm -rf app/node_modules/.cache
   npm run deploy
   

5. 检查React Router路由模式
   如果项目用了React Router，必须改用HashRouter替代BrowserRouter。GitHub Pages不支持单页应用的HTML5 History模式，会导致路由失效页面空白。示例：

   // 替换之前的BrowserRouter
   import { HashRouter as Router, Route, Routes } from 'react-router-dom';
   
   function App() {
     return (
       <Router>
         <Routes>
           {/* 你的路由配置 */}
         </Routes>
       </Router>
     );
   }
   

完成以上步骤后，重新访问GitHub Pages链接，应该就能正常加载你的React应用了。

内容的提问来源于stack exchange，提问作者Mr.Ant