刷新反应应用程序，404 错误。反应路由器问题

Posted 2023-02-21

【中文标题】刷新反应应用程序，404 错误。反应路由器问题

【英文标题】：Refresh react app, 404 error. React router issue

【发布时间】：2018-11-30 22:03:42

【问题描述】：

我正在使用 react-boilerplate (https://github.com/react-boilerplate/react-boilerplate) 我的应用程序在 localhost 上完美运行，但是在服务器上的子目录（重要！不在根目录中！）部署后，应用程序一直工作直到刷新......如果我在应用程序位于其他路由时尝试刷新（/something/here），我收到 404 错误页面未找到。

我搜索了很多关于这个问题，我想出了问题和解决方案，但我无法解决这个问题......你可以在这里看到问题解释： https://tylermcginnis.com/react-router-cannot-get-url-refresh/

我正在使用 React Router 4。也许我需要使用 historyApiFallback: true 但是 Idk 如何将它与具有大量 webpack 配置文件（不仅仅是一个..）的 react 样板一起使用。有什么帮助吗？

【问题讨论】：

我遇到了这个问题并通过 URL 重写解决了。您的主机使用什么网络服务器？

这个问题与你正在运行的 Web 服务器的反应无关

网络服务器 nginx

你能访问nginx.conf吗？

【参考方案1】：

我之前也遇到过这个问题。在本地主机上非常好，但是在非根路由上刷新或直接输入非根 URL 总是给我 404。得出的结论是它无法自行找到非根目录，因为 React 只有 index.html 作为其 HTML 文档并且需要一些重写规则。

在我的情况下，我的主机使用 Apache 并将 .htaccess 添加到我的 Web 根目录，并且以下内容有效：

<IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteCond %REQUEST_FILENAME !-f
  RewriteCond %REQUEST_FILENAME !-d
  RewriteRule . /index.html [L]
</IfModule>

对于nginx，当然需要修改nginx配置。我在这里找到了一个答案，它看起来比 Apache 的答案简单得多：React-router and nginx

location / 
  try_files $uri /index.html;

基本上你需要告诉 web 服务器将所有请求转发到你的 React 的 index.html，因此让 react-router 处理路由。

其他解决方案是使用HashRouter，但会导致一些难看的URL。

【讨论】：

好的，但如果我在子目录 (something.com/project) 中有反应构建，我需要写“try_files $uri /project/index.html”不是吗？我需要将第一行“位置/”更改为“位置/项目”？

如果你的 React 的 index.html 在那里，你可以试试。但重点仍然是将请求重新路由到您的 React 项目的 index.html

@razer90 正如您所说，如果 index.html 在子文件夹中，我们应该添加文件夹名称。这对我有用，谢谢。

【参考方案2】：

我前几天遇到过这个问题，但是使用 apache Web 服务器，所以在我的情况下，问题是 httpd.conf 文件中的标志 AllowOverwrite 需要从 None 更改为 All。

您还需要创建一个具有以下值的 .htaccess 文件：

<IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteCond %REQUEST_FILENAME !-f
  RewriteCond %REQUEST_FILENAME !-d
  RewriteRule . /your_directories/index.html [L]
</IfModule>

此外，在您的 apache 配置中，您还需要设置将添加应用程序的虚拟目录，并在目录标签内添加以下行：

<Directory "/your_virtual_path_directory">
   RewriteBase /
   Options Indexes FollowSymLinks
   AllowOverride All
   Require all granted
</Directory>

希望对你有所帮助