如何将带路由的React项目上传至GitHub并正常运行？

GitHub Pages是纯静态文件托管服务，未向用户开放服务端路由重写配置权限。当你使用React Router的BrowserRouter模式时，访问/about、/detail/1这类子路径，GitHub Pages会直接到服务器对应路径下查找静态html文件；但React单页应用仅在根目录存在唯一的index.html入口文件，找不到目标文件时就会返回404错误，导致路由逻辑完全无法执行。
所有支持React BrowserRouter模式的静态托管平台，本质都是提供了服务端重写配置能力，将任意路径的请求都统一返回根目录index.html，让前端路由接管页面渲染。

• 替换路由模式为HashRouter
  这是改造成本最低的方案。Hash模式下路由信息拼接在URL的#标识符后，例如https://yourname.github.io/your-repo/#/about，#后的路径片段不会被发送到服务端，GitHub Pages始终只会返回根目录的index.html，前端拿到完整hash路径后就能正常匹配路由规则。修改时仅需要把路由组件的引入从BrowserRouter换成HashRouter即可，如果项目部署在仓库子路径下，记得给路由组件添加对应仓库名的basename属性，重新构建后上传即可正常访问，唯一区别是URL中会携带#标识，不影响普通分享和使用。
• 配置404页重定向+路径还原
  如果不想URL带#，可以在项目public目录下创建和index.html内容完全一致的404.html，这样子路径请求触发404时，会先加载和首页一致的React应用代码；随后在index.html的head标签内加入小段路径处理脚本，把404跳转时携带的路径参数还原为前端路由可识别的格式，就能正常匹配路由。该方案同样需要给路由组件配置对应仓库路径的basename。

如果觉得GitHub Pages的路由适配麻烦，可以选择以下原生支持单页应用路由的托管平台，都可以生成公开可访问的分享链接，免费额度足够个人项目使用：

• Vercel：可自动识别React等前端框架，关联代码仓库后自动完成构建部署，内置单页应用路由重写规则，不需要额外修改路由代码，部署速度快，支持自动预览提交版本。
• Netlify：支持代码仓库关联部署、本地构建包拖拽部署两种方式，仅需要在项目根目录添加简单的重定向配置，即可让所有路径请求指向index.html，适配React路由逻辑，支持自定义域名、表单提交等扩展能力。
• Cloudflare Pages：依托全球CDN节点，访问速度快，免费额度高，在构建配置中开启单页应用重写规则后即可正常支持React路由，支持关联代码仓库实现提交自动部署。
• Surge：轻量级命令行静态托管工具，本地安装工具后仅需要几行命令即可把构建后的产物发布上线，内置单页应用路由支持，适合快速发布测试版本的项目。

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