在 Apache 服务器上为 React Router 配置 htaccess 文件

Question

我已经将带有 React Router 的 React 应用程序部署到我的 Bluehost 服务器，并且需要配置 htaccess 文件以将所有路由 URL（/portfolio、/about 等）重定向到 index.html，而不是尝试获取新文件来自服务器并抛出 404。

我读过无数类似的问题，解决方案似乎是将其添加到您的 htaccess 文件中：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

我尝试过此操作，但当我尝试直接访问网站上非主页的任何页面时，仍然收到 404 错误。我想知道我现有的 htaccess 文件中是否还有其他内容阻止上述代码工作？

Bluehost 中已经有一些代码，并且我看到另一个

IfModule

语句，所以我想知道该语句是否覆盖了第一个语句。然而，我害怕编辑它并破坏某些东西，因为它明确表示“不要编辑”。这是我的完整 htaccess 代码：

Header always set Content-Security-Policy: upgrade-insecure-requests

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

# php -- BEGIN cPanel-generated handler, do not edit
# Set the “ea-php74” package as the default “PHP” programming language.
<IfModule mime_module>
  AddHandler application/x-httpd-ea-php74 .php .php7 .phtml
</IfModule>
# php -- END cPanel-generated handler, do not edit

# BEGIN WordPress
# The directives (lines) between "BEGIN WordPress" and "END WordPress" are
# dynamically generated, and should only be modified via WordPress filters.
# Any changes to the directives between these markers will be overwritten.

# END WordPress

有什么想法吗？我已经仔细检查了我的

BrowserRouter

设置是否正确，并且还尝试了其他一些 htaccess 配置。我想尽可能避免使用 HashRouter 或 Node，但我感到很沮丧。如果需要，我也可以提供我的 React 代码，但我很确定错误不在于 React 设置。

Answer 1

您可以在 /etc/apache/sites-available 文件夹中创建一个虚拟主机文件并添加以下内容：

  <VirtualHost *:8080>
   ServerName example.com
   DocumentRoot /var/www/httpd/example.com

  <Directory "/var/www/httpd/example.com">
    ...

    RewriteEngine on
    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]
    # Rewrite everything else to index.html to allow html5 state links
    RewriteRule ^ index.html [L]
  </Directory>
</VirtualHost>

这对我有用

Answer 2

朋友。你能解决这个问题吗？我和你有同样的问题，我有相同的 htaccess 配置，但它对我不起作用。我认为这可能是我的代码与反应路由器，但我已经检查过它，它很好。我已经用尽了所有实例