React-router-dom结合Suspense部署gh-pages子路由刷新404问题求解

你遇到的404问题和Suspense、React.lazy没有关联，核心是gh-pages作为纯静态文件服务，默认没有SPA路由的 fallback 规则：当你直接访问/carousel子路径时，服务器会尝试查找对应路径的静态HTML文件，找不到就返回404。只有从首页通过前端路由跳转时，路径是由浏览器端的react-router控制，才不会触发服务器请求。

最通用的实现方法是自定义404 fallback页面：

• 首先确认package.json中的homepage字段已经配置为你的gh-pages站点地址，和BrowserRouter的basename属性值/home对应
• 在项目public目录下新建404.html文件，内容和同目录的index.html完全一致
• 重新执行打包、部署到gh-pages即可
  原理是gh-pages会对所有找不到对应静态文件的请求返回404.html，这个文件就是你的React应用入口，react-router会自动匹配前端路由渲染对应页面，刷新、直接输入地址都可以正常访问。

如果不想依赖gh-pages的404 fallback trick，可以选择原生支持SPA路由的部署平台，无需额外配置即可完美兼容BrowserRouter：

• Vercel/Netlify：这类Serverless平台默认支持SPA路由重写，Vercel无需额外配置直接打包上传即可，Netlify只需要在public目录新增_redirects文件，写入/* /index.html 200即可
• 自建Nginx服务器：在站点配置中加入如下规则即可实现路由 fallback：

location /home {
  try_files $uri $uri/ /home/index.html;
}

• 腾讯云/阿里云静态页面托管：各大云厂商的静态托管服务都支持配置自定义错误页，把404错误的响应页设置为index.html即可，逻辑和gh-pages的解决方案一致。

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