reactjs - React.js 应用程序显示 404 未在 nginx 服务器中找到

Question

我将react.js应用程序上传到服务器。我正在使用 nginx 服务器。应用程序运行良好。但是当我转到另一个页面并刷新时，该网站无法正常工作。它显示 404 未找到错误。

我该如何解决这个问题？

Answer 1

当您的 react.js 应用加载时，路由由 react-router 在前端处理。举例来说，您位于 http://a.com。然后在页面上导航至 http://a.com/b。此路由更改由浏览器本身处理。现在，当您在新选项卡中刷新或打开网址 http://a.com/b 时，请求将转到您的 nginx，其中特定路由不存在因此你会得到 404。

为了避免这种情况，您需要加载所有不匹配路由的根文件(通常是index.html)，以便 nginx 发送该文件，然后由您的 React 应用程序在浏览器。为此，您必须在 nginx.conf 或 sites-enabled 中适本地进行以下更改

location / {
 try_files $uri /index.html;
}

这告诉 nginx 查找指定的 $uri，如果找不到，则将 index.html 发送回浏览器。 (有关更多详细信息，请参阅https://serverfault.com/questions/329592/how-does-try-files-work)