React SPA部署Vercel后路由刷新/直接访问出现404问题求助

这确实是React单页应用（SPA）的典型问题。本地开发时，路由由React Router在浏览器端处理，所有请求都指向根目录的index.html；但部署到Vercel后，刷新页面或直接访问子路由时，Vercel服务器会尝试查找对应路径的静态文件（比如/about-us对应的about-us.html），而SPA只有一个index.html，所以返回404。

在项目根目录创建vercel.json文件，添加路由重写规则，让所有请求都转发到index.html，由React Router处理：

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}

• 统一路由路径格式：你的路由配置里about-us/末尾带斜杠，其他路由比如/form是开头带斜杠，建议统一成/about-us（去掉末尾斜杠、保留开头斜杠），避免路径匹配混乱。
• 删除重复路由：配置里存在两个完全相同的/GS路由，建议删除其中一个，减少冗余。

1. 创建并保存vercel.json到项目根目录
2. 重新部署项目到Vercel
3. 测试刷新子路由或直接访问子路由，确认不再返回404

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