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

【问题标题】：Refresh react app, 404 error. React router issue刷新反应应用程序，404 错误。反应路由器问题
【发布时间】：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吗？

标签： reactjs nginx webserver react-router-v4 react-boilerplate

【解决方案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>

希望对你有所帮助

【讨论】：