仅在生产中尝试调用 URL 时反应 404

Question

在开发中，我有一个 React 网站，它直接调用托管在 Digital Ocean 上的 API。

主要 url 是 http://localhost:3000 并且加载非常好。这包含一系列链接，所有这些链接都重定向到 http://localhost:3000/narrative/[id] 的变体，例如 http://localhost:3000/narrative/4265 或 http://localhost:3000/narrative/1.

如果我在开发过程中尝试重新加载 http://localhost:3000/narrative/4265，那么页面重新加载绝对没问题。同样，如果我打开一个选项卡或新浏览器 window 并直接转到 http://localhost:3000/narrative/4265 页面加载正常。

然而，在生产中，我在重新加载页面或尝试从新选项卡导航到该页面或 window.

时收到 404

我看过以下问题：

How to handle 404 in react。我认为这不适用，因为我的实例在开发中运行良好
React Router Gives 404 error on production。我不太确定如何配置 htaccess（如果我可以将它放在可部署的存储库中，或者如果我必须直接在服务器上配置），或者确实如何 “配置单个入口点” 正如另一个答案所暗示的那样。

我从@jonsharpe 的回答See Building for relative paths 中了解到可以在我的index.js 上使用BrowserRouter。但是我不确定我是否应该将 Route 修改为 Link

  <HashRouter>
    <Navigation />
    <Routes>
      <Route path="/" element={<Home />} />
            <Route path="/search" element={<Search />} />
            <Route path="/narrative/:id" element={<Detail />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
    </Routes>

  </HashRouter>

Answer 1

已通过将 --spm 添加到 pm2 serve build 80 命令来修复

建议来自 this answer

仅在生产中尝试调用 URL 时反应 404

React 404 when attempting to call a URL only in production

http-status-code-404

reactjs