React Router在生产环境中出现404错误

Question

React Router 在本地机器和 Chrome 上运行良好，但在 Safari 和其他浏览器上无法正常工作。

 <Switch>
    <Route exact path={"/"} component={Home} />
    <Route path="/programs/:slug" component={Programs} />
    <Route path="/page/:slug" component={Page} />
    <Route component={NotFound} />
</Switch>

这是我的代码，但在开发模式下它可以完美运行，没有错误。但在生产环境中，当我导航到programs/:slug或page/:slug时，Safari会给出404错误。

- Schnecke

---

你是否在生产环境中使用了URL重写？所有的URL都应该指向“index.html”。 - Kishan Mundha

这是吗？在构建之前，我将其放入我的 package.json 中 "homepage": "https://www.example.co"。 - Schnecke

顺便说一下，我正在使用共享主机。 - Schnecke

在生产环境中，您的应用程序将在托管为单页应用程序的Node.js上热运行。在生产环境中，您需要放置一些依赖于服务器的配置。例如，在Apache中，您可以在.htaaccess中进行配置，在nginx中则可以进行重写。 - Kishan Mundha

我不熟悉botmap.io。我已经提供了答案，请在找到答案后标记为完成。 - Kishan Mundha

Answer 1

我已经添加了这个到 .htaccess 文件中。

RewriteBase /
RewriteCond %{REQUEST_URI} !^/(assets/?|$)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

感谢Kishan Mundha的解释。

- Schnecke

Answer 2

您可能需要在服务器上配置单个入口点index.html。所有的url都应该指向index.html，入口点将根据路由来决定如何呈现和内容。

- Kishan Mundha

---

如何做到这一点？ - Abdul Shakoor Mousa

Answer 3

如果您正在使用pm2 serve，您可以简单地添加--spa标志。

- GarryOne