在项目的根目录下添加一个vercel.json文件，并使用“rewrites”重写所有传入路径，使其引用索引路径。
例如：

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

点击此处了解更多信息：https://vercel.com/docs/configuration#project/rewrites

指定每个路由

为了让React路由器在Vercel中工作，我必须在vercel.json文件中指定每个路由，如Surbina's answer中所述。（顺便说一句，谢谢，我使用这个解决方案很长一段时间了）

{
  "routes": [
    { "src": "/", "dest": "/" },
    { "src": "/recruit", "dest": "/" }
    { "src": "/tos", "dest": "/" }
    // ....
  ]
}

但这可能不是最佳的，这取决于您的应用程序有多少路由，老实说，有时我会忘记添加新路由。

Vercel中的正则表达式匹配问题

我尝试了“匹配所有”Regex作为源路由[{ "src": "/*", "dest": "/" }]，就像我以前在其他托管服务中所做的那样，但由于某些原因，Vercel服务器对所有请求都使用此路由，即使index.html需要请求像bundle.js这样的文件，也会破坏应用程序。

解决方案：匹配路由但忽略文件

我找到的解决方案是使用Regex匹配所有路由，除了包含点（.）的路由，这些路由通常是文件，如bundle.js。然后您可以请求像/recruit这样的URL，它会被路由到/，因为它没有点。
正则表达式是/[^.]+（在Vercel上变成^/[^.]+$）。
请注意，这是一个非常简单的正则表达式，可能无法涵盖所有情况，但是，我还没有得到任何问题，它的时刻，这篇评论。
所以我的vercel.json文件看起来像这样：

{
  "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]
}

希望对你有用！

在vercel托管服务中，您可以通过在framework preset中选择create-react-app来部署整个项目：

或者，您可以在构建项目后通过运行npm run build并选择Other作为Framework预设来仅部署build文件夹：

备注

如果你在BrowserRouter中使用react-router-dom，你应该在你的项目文件夹或构建文件夹的根目录下有vercel.json文件：

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

此配置将防止您的Web应用程序在刷新页面或打开其他路由时出现404错误。
希望对你有帮助。

只需将其添加到您的vercel.json中，这将把您的所有路由路由到index.html，除了js文件

{
  "routes": [
    {
      "src": "/[^.]+",
      "dest": "/"
    }
  ]
}

也许你需要服务器将所有请求重定向到index.html。如果是Apache，那么你可以使用mod_rewrite，你需要一些这样的代码：

RewriteCond %{REQUEST_URI} !^/index\.html
RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_FILENAME} !-f
RewriteRule ^/.*$ /index.html [L,PT]

听起来Vercel在错误的地方查找您的文件。我发现它们很挑剔，有时候在使用localhost时有效的东西在Vercel部署上不起作用。

"name": "my-app",
"homepage": ".",
...

在package.json中。这通常对我有效，但如果不起作用，请尝试您的部署的实际URL，即https://something.vercel.app。对于某些设置，我不得不这样做。
如果仍然不起作用，请检查devtools中的Network选项卡并找到您的请求，并检查它实际上正在使用哪个URL查找资源。这可能会给予您一些线索。

我正在使用Create React App和react-scripts来构建项目，我遇到了类似的问题。问题是当我在vercel的部署站点上单击浏览器刷新时，子路由内容没有加载，但在本地工作正常。
例如，如果你直接去这个子路由，它会失败

https://mysite/top/second

原来问题出在我的package.json中，我有"homepage": "."，我只是通过更改"homepage": ""（删除点）来修复它
react-scripts build将读取package.jsonhomepage属性，并将homepage的值附加到链接js和css捆绑代码的所有路径。

您还可以运行（您的生产构建），如

yarn serve build -s

-s选项将所有未找到的路径重定向到index.html，因此您甚至不需要serve.json/vercel.json文件

在根目录下创建vercel.json文件并粘贴代码

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