React项目部署Vercel后非首页刷新/直接访问失效求助

问题原因 #

React属于单页应用（SPA），所有页面路由都是在浏览器端（客户端）处理的。当你直接在地址栏输入VERCEL_DOMAIN/category这类非首页链接，或者刷新非首页页面时，Vercel的服务器会尝试在服务器上寻找对应路径的静态文件，但这类文件并不存在，所以会返回404错误。而通过菜单跳转是客户端内部路由跳转，不会向服务器发起新的请求，因此能正常访问。

解决方案 #

在项目根目录添加Vercel配置文件，设置重写规则，让所有请求都指向项目的index.html，由React Router接管路由处理。

1. 创建vercel.json配置文件 #

在项目根目录新建vercel.json文件，写入以下内容：

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

2. 重新部署项目 #

将vercel.json提交到你的代码仓库，然后在Vercel平台重新部署该项目。部署完成后，直接访问或刷新任意非首页链接就能正常加载对应的页面了。

额外说明 #

你的现有React Router代码不需要做任何修改，保持原样即可。这个配置是Vercel官方针对单页应用的标准适配方案，能完美解决客户端路由在服务器端的路径匹配问题。

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