React Router - 如何处理服务器上不存在的页面？ [重复]

Posted 2021-03-29

这个问题在这里已有答案：

• How to use react router (createBrowserHistory) on Microsoft IIS to make routing working? 5个答案

这可能是一个服务器问题，而不是React Router的问题，但这里是我坚持的场景：

在我的本地机器上开发我的应用程序时，说我希望导航到路线/about。例如，我可以输入localhost:3000/about并按Enter键，页面将加载并显示“about”组件。

但是在构建应用程序并将其部署在我的服务器上之后，如果用户在物理上键入http://example.com/about（假设我的站点是example.com）并且在URL栏中输入，则返回服务器错误404 - 文件或页面未找到错误。如何才能简单地加载about组件而不是尝试导航到不存在的“about”页面？

答案

我不确定您使用的服务器技术类型。使用react-router中的BrowserRouter，您需要确保服务器在您要求/关于时发送回index.html。

这是我在express中使用的一个例子：

app.get('*', function (request, response){
  response.sendFile(path.resolve(__dirname, '../build', 'index.html'));
});

当有人转到/关于它将发送回index.html然后你的路由将由react-router从那时起管理。

webpack-dev-server在您使用historyApiFallback时为您执行此操作。 https://webpack.js.org/configuration/dev-server/#devserver-historyapifallback