【问题标题】:ReactRouter v5 refresh gets a 404React Router v5 刷新得到 404
【发布时间】:2020-01-17 19:49:50
【问题描述】:

我可以转到我的根路由,使用应用程序中的链接进行导航,但是当我直接转到或刷新非根路由(仅在生产中)时,我收到以下错误:

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

我有一个使用ReactRouter v5.0.1 设置的项目。 我正在使用BrowserRouter 包装器,我不想使用HashRouter,因为 URL 看起来不错。

当我刷新或转到不是根路由的路径时(例如:____/user/article):

  • 在本地,它按预期工作
  • 在生产中(Heroku),它给出了一个Cannot get /user/article

我已经查找了这个问题,我找到的解决方案是更改我的webpack.js

  • historyApiFallback: true 添加到devServer
  • publicPath:'/' 添加到output

这些都无法解决我的问题。

我的前端客户端位于我的 nodejs“应用程序”中,其中构建的文件由快速服务器提供。也许这可能会影响我的刷新?

非常感谢您的帮助...

【问题讨论】:

  • 你需要让你的服务器返回index.html文件以获取非api路由。

标签: reactjs express webpack react-router


【解决方案1】:

这是客户端与服务器端路由问题。在前端导航时,都是客户端路由。但是当您刷新页面时,它会使用该路由向后端发出请求。因此,在您的快速服务器中,您需要在所有其他路由之后定义的全部路由,将它们重定向到根路径/,例如

app.get('*', function(req, res) { /* redirect to / here */ });

如果你想更深入地探索这个问题,已经有很多关于这个的帖子,比如this one

【讨论】:

  • 非常感谢您的回答,我没有意识到这是一个明确的问题。几分钟前我发现了那个确切的帖子......我正在尝试弄清楚如何将它与我的非 api 路由一起使用。