Heroku 上的 Express/React 应用程序刷新问题答案

【问题标题】：Express/React app refresh issue on HerokuHeroku 上的 Express/React 应用程序刷新问题
【发布时间】：2021-12-31 15:43:12
【问题描述】：

我的带有 Express 后端的 React 应用程序托管在 Heroku 上，所有路由都按预期工作，直到页面刷新。以编程方式或使用页面返回的刷新按钮刷新页面：

Failed to load resource: the server responded with a status of 404 (Not Found)

后退和前进按钮（在刷新之前有效）停止工作，恢复应用的唯一方法是导航到“/”。然后一切正常，直到下一次刷新。

我的服务器路由：

router.use("/api/skus", skuRoutes);
router.use("/api/categories", categoryRoutes);

// serve static files if in production
if (process.env.NODE_ENV === "production") {
  router.use(express.static("client/build"));

  router.get("*", (req: Request, res: Response) => {
    res.sendFile(
      path.resolve(__dirname, "..", "client", "build", "index.html")
    );
  });
}

我在这里阅读了很多很多其他类似的问题以及很多关于在 Heroku 上使用 React 路由器的教程，但我还没有找到适合我的解决方案。

我已经尝试过使用 static.json 文件的解决方案：

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

，并将 create-react-app buildpack 添加到 Heroku，但这些对我不起作用。

GitHub 仓库here.

当前部署here。

【问题讨论】：

标签： reactjs heroku react-router

【解决方案1】：

通过将我的 BrowserRouter 更改为 HashRouter 解决了该问题。现在刷新工作完美。

【讨论】：