create-react-app TypeScript项目部署gh-pages路由失效更新失败求助

部署内容无法更新排查 #

• 先确认仓库的Pages部署源配置：进入仓库的Settings → Pages页面，检查Source选项是否设置为gh-pages分支、根目录，若当前选的是main/master分支，切换为gh-pages分支后保存，等待几分钟即可生效。
• 调整deploy脚本：当前脚本的clean执行逻辑可能存在跨平台兼容问题，将scripts里的deploy字段替换为：

  "deploy": "gh-pages -d build -f"
  

  -f参数会强制推送构建产物，忽略本地缓存的旧部署记录，执行npm run deploy时会自动触发predeploy钩子执行build，无需手动提前跑build命令。
• 执行部署命令时留意终端输出，如果出现权限报错，确认本地git已经配置了对应仓库的推送权限，或者使用SSH方式关联仓库。

路由不生效、仅渲染MainTemplate外层元素解决 #

这是GitHub Pages部署子路径应用的典型问题，你用的react-router-dom v5默认配置适配根路径部署，需做两处修改：

• 替换路由模式：将代码中<BrowserRouter>标签替换为<HashRouter>，GitHub Pages原生不支持BrowserRouter的history模式，刷新会出现404，HashRouter通过哈希值匹配路由，无需服务端配置适配。
• 添加路由基准路径：给Router组件添加basename属性，值为你站点的子路径，对应package.json里homepage的后缀：

  <HashRouter basename="/project-money-front">
    {/* 你的路由配置 */}
  </HashRouter>
  

• 若要继续使用BrowserRouter，可在public目录下新增404.html文件，写入重定向逻辑，将所有路径请求重定向到index.html，再由前端路由接管匹配。

修改完所有配置后重新执行npm run deploy，等待GitHub Pages构建完成后刷新页面验证即可。

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