刷新页面时出现 404 错误 - 部署在 Heroku 上的 React App答案

【问题标题】：404 error when refreshing the page - React App deployed on Heroku刷新页面时出现 404 错误 - 部署在 Heroku 上的 React App
【发布时间】：2020-01-12 00:43:39
【问题描述】：

我在 heroku 上部署了一个 React 应用程序，每次刷新某些页面时，都会出现 404 错误，喜欢：Cannot GET /create

我已经被搜索过，我发现了一个相关的问题：
Question about 404 with React Router

所以我创建了一个 static.json 文件重定向到 index.html 但错误仍然发生。

{
    "root": "build/",
    "clean_urls": false,
    "routes": {
      "/**": "index.html"
    }
  }

有人对部署到heroku 的react 应用程序有什么问题吗？

【问题讨论】：

您使用的是 Heroku buildpack 吗？你用什么来提供文件？
我没有使用 heroku buildpack，也没有使用任何东西来提供文件
这是一个 Create React App 项目吗？如果是这样，请尝试为您处理 404 重定向的 github.com/mars/create-react-app-buildpack。
是的。好的，谢谢分享，我试试
顺便说一句，这就是应用程序 - twobudget.herokuapp.com

标签： javascript reactjs heroku deployment frontend

【解决方案1】：

我知道这是一个已有 2 年历史的问题，但不久前我一直在努力解决这个问题，我认为这可能会对遇到同样问题的人有所帮助：

如果您收到 404 状态代码，则可能是 API 没有为该路由设置 GET 端点。当您重新加载页面时，您的浏览器本质上是向服务器发出 GET 请求，服务器将其设置的任何内容发送回 - 在这种情况下，什么都没有，导致 404 错误。另一方面，React 实际上所做的只是重新渲染组件，没有进一步的HTTP 请求，因为它只在客户端运行。但并非所有服务器路由都会设置 GET 端点，即使它们设置了，您最终也会在重新加载页面时将 JSON 或其他内容直接发送到您的浏览器屏幕，而不是React 应用程序，因此您真正想要的是正确处理这些请求。

首先非常重要的是要注意服务器路由和 React 路由不应冲突（一个好主意是在您的服务器路由前面加上 /api）。重命名您的服务器路由，并且不要忘记相应地重命名来自 React 的所有 API 调用。然后，在定义路由后，将以下代码添加到您的 server.js 文件中：

isProduction &&
  app.get("*", function (request, response) {
    response.sendFile(path.resolve(__dirname, "../client/build", "index.html"));
  });

这将处理您的浏览器在页面刷新时执行的 GET 请求，确保 Node 始终为 index.html（也称为 React 应用程序）提供这些请求，因此它可以处理路由。由于您的服务器路由现在已重命名并且不会与 React 的路由冲突，因此当您重新加载页面或尝试直接从 URL 地址栏导航时，您将始终返回 React 应用程序，该应用程序将处理所有 API来电。

【讨论】：