reactjs - ReactRouter v5 刷新得到 404

Question

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

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“应用程序”中，其中构建的文件由快速服务器提供。也许这可能会影响我的刷新？

帮助将不胜感激...

标签： reactjsexpresswebpackreact-router

Answer 1

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

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

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