React Router Dom path='*' 404路由在Vercel部署后失效求助

你的App.jsx路由配置本身没有问题，path='*'的路由已经放在所有路由最后，符合React Router的匹配规则。问题出在Vercel的静态站点服务配置上，需要添加路由重写规则让React Router接管所有路由请求。

解决步骤： #

1. 无需修改App.jsx代码 #

你的路由顺序和path='*'的配置是正确的，本地测试时404路由能正常触发，说明代码层面没问题。

2. 添加Vercel配置文件 #

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

{
  "routes": [
    { "handle": "filesystem" },
    { "src": "/.*", "dest": "/index.html" }
  ]
}

这个配置的作用是：

• 先让Vercel优先处理静态资源（如CSS、JS、图片等）
• 所有其他请求都转发到index.html，让React Router负责路由匹配，包括404的path='*'路由

3. 重新部署到Vercel #

将新增的vercel.json文件提交到代码仓库，重新触发Vercel的部署流程。部署完成后，访问不存在的路由就能看到你自定义的NotFound组件了。

补充说明：你的NotFound组件目前是针对搜索无结果的场景，若需要区分"搜索无结果"和"路由不存在"两种情况，可以考虑拆分组件，不过这和当前404路由不生效的问题无关。

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