解决页面刷新后出现的 Vercel 404“页面未找到”错误。

我最近完成了一个项目（cinemaxtv.vercel.app），这是一个电影应用。在 Vercel 上部署该应用后，我注意到一个异常问题。每当我导航到其他页面并刷新该特定路由时，都会遇到 404 Not Found 错误，提示找不到指定的路由。然而，当我在本地主机上执行相同操作时，却得到了预期的结果。因此，我推断该错误很可能是由于 Vercel 上的部署故障造成的。

上述 404 未找到错误的图形显示

经过一番研究，我找到了解决这个问题的方法。为了修复 404 Not Found 错误，需要为你的 React Router 应用建立重定向和重写规则。这些规则将帮助你的应用规避“页面未找到”错误。

首先，在项目的根目录中生成一个 vercel.json 文件。该文件将使 Vercel 能够准确配置路由，您应该在下图中插入以下代码片段。

此图表示 vercel.json 文件的结构和代码片段。

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

提供的代码片段指示 Vercel 将任何传入的 URL 路径重写到根路径。此配置确保当我们使用子路径启动重定向时，Vercel 会将其重定向到根路径，从而有效地防止发生 404 Not Found 错误。

如果您的项目已经部署，请将更改推送到您的 GitHub 存储库并刷新页面，您将无缝获得所需的结果，而不会遇到任何问题。

瞧！现在可以正常工作了。

结论
如果您觉得这篇文章有趣，请点赞并分享。此外，也欢迎您在下方评论区分享您的想法和反馈。感谢您的参与。

欢迎工作🙂你喜欢这篇文章吗？
或者你需要一位经验丰富的技术作家/React 开发人员来担任远程、全职或合同制职位？欢迎随时联系我。Github ||
Linkedin || Twitter