React项目部署Vercel后跳转异常：点击About按钮显示index.html而非about.html

1. 配置Vercel路由规则 #

在项目根目录新建vercel.json文件，写入以下配置，确保Vercel优先返回about.html静态文件：

{
  "routes": [
    { "src": "/about.html", "dest": "/about.html" },
    { "src": "/(.*)", "dest": "/index.html" }
  ]
}

Vercel默认会把所有请求导向index.html（适配React单页应用），这个配置让匹配到/about.html的请求直接返回对应文件，其他请求再走单页路由逻辑。

2. 修正按钮跳转逻辑 #

如果之前用了react-router-dom的Link组件跳转静态文件，换成原生<a>标签：

<a href="/about.html">About按钮</a>

Link组件是用于React客户端路由的，会被单页路由拦截，无法直接访问静态HTML文件。

3. 确认静态文件位置 #

把about.html移到React项目的public目录下（React的静态资源必须放在此目录，打包部署后才会被正确识别），跳转路径保持/about.html即可。

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