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

Question

我在 heroku 上部署了一个 React App，每次刷新某个页面时，都会出现 404 错误，例如： Cannot GET /create

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

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

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

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

Answer 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电话。