刷新页面时，React应用在服务器上显示404页面。

Question

我正在使用 create_react_app 构建React应用程序。现在，我将构建移到服务器上，并使用serve运行应用程序。我的应用程序将从API中加载数据。当我刷新页面时，它显示404页面未找到错误。我还尝试使用http-server。

当我在某些页面中（例如/dashboard）并刷新页面时，它会显示404错误。现在我必须转到BASE_URL/才能使其正常工作。但是在本地刷新一切都有效。

这是我的package.json。

"react-dates": "^17.0.0",
"react-dom": "^16.4.0",
"react-i18next": "^7.7.0",
"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.4"

我在服务器上使用了 apache。

我认为这不是我的代码出了问题。如果您们有任何了解，请帮助我。

运行命令是 http-server ./build -p 7001

- Sivabalan

---

你们使用什么样的服务器环境？ - sparsh turkane

aws，Ubuntu服务器。但我不知道您所说的服务器环境是什么意思。 - Sivabalan

我指的是Apache，Nginx等。 - sparsh turkane

我在我的服务器上使用Apache。 - Sivabalan

如果您的根目录中有 .htaccess 文件，则为使其正常工作，您必须在服务器上启用 mod_rewrite，请按照此链接 https://www.digitalocean.com/community/tutorials/how-to-rewrite-urls-with-mod_rewrite-for-apache-on-ubuntu-16-04 的第一步和第二步进行操作。 - sparsh turkane

Answer 1

为了避免Apache服务器上的404错误，您需要启用 mod_rewrite 并在根目录中添加 .htaccess 文件。 步骤1-启用mod_rewrite 首先，我们需要激活 mod_rewrite 。它可以在干净的Apache 2安装中使用，但未启用。

sudo a2enmod rewrite

这将激活模块或提示您该模块已启用。要使这些更改生效，请重新启动Apache。

sudo systemctl restart apache2

或者

sudo service apache2 restart

第二步 —— 设置 .htaccess

默认情况下，Apache 禁止使用 .htaccess 文件应用重写规则，因此首先需要允许对该文件进行更改。使用 nano 或您喜欢的文本编辑器打开默认的 Apache 配置文件。

sudo nano /etc/apache2/sites-available/000-default.conf

在该文件中，你会找到一个从第一行开始的< VirtualHost *:80>块。在该块内部，添加以下新块，使您的配置文件看起来像下面这样。确保所有块都正确缩进。

<VirtualHost *:80>
    <Directory /var/www/html>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Require all granted
    </Directory>

    . . .
</VirtualHost>

如果您已经配置了https，那么您将在第一行找到一个< VirtualHost *:443>块。在该块内部，添加以下新块，以使您的配置文件看起来像以下内容。确保所有块都正确缩进。在这种情况下，您还需要在HTTP和HTTPS的2个虚拟主机下面添加此内容。

<VirtualHost *:443>
    <Directory /var/www/html>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Require all granted
    </Directory>

    . . .
</VirtualHost>

保存并关闭文件。为了使这些更改生效，请重新启动Apache。

sudo systemctl restart apache2

或者

sudo service apache2 restart

步骤三 —— 创建 .htaccess 文件

现在，在网站根目录下创建以下 .htaccess 文件。

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

如果您已经启用了mod_rewrite并应用了重写规则，则可以跳过步骤1和步骤2，直接使用步骤3。

我参考了React的文档和Digital Ocean提供的服务器设置。

- sparsh turkane

Answer 2

如果您正在使用Apache HTTP服务器，您需要在公共文件夹中创建一个名为“.htaccess”的文件，其内容如下：

Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

根据create-react-app文档https://github.com/facebook/create-react-app

，

- dvvtms

---

我在public文件夹中创建了.htaccess文件，但仍然只能看到相同的404页面。 - Sivabalan

网站是否有从HTTP到HTTPS的重定向？ - dvvtms

但是服务工作者需要HTTPS加密... 这可能会影响这个。 - dvvtms

我使用了 HashRouter 解决了这个问题。之前我使用的是 BrowserRouter。现在我的唯一问题是从 URL 中删除 #。这个问题我稍后再看。但我不知道我做的是对还是错。 - Sivabalan

Answer 3

"我将进一步解释sparsh turkane 的回答，当我使用 CentOS 服务器时遇到了这个问题。

以下是我如何解决它的方法:

在 CentOS 上，默认情况下启用了 mod_rewrite 模块。如果您发现它没有在您的服务器上启用，则可以通过编辑位于 /etc/httpd/conf.modules.d/ 目录中的 00-base.conf 文件来启用它:"

sudo nano /etc/httpd/conf.modules.d/00-base.conf

添加或取消注释以下行：

LoadModule rewrite_module modules/mod_rewrite.so

保存并关闭文件。

现在我们可以通过在默认文档根目录中创建一个.htaccess文件来设置URL重写。一个.htaccess文件允许我们修改重写规则而不需要访问服务器配置文件。因此，.htaccess对于您的Web服务器非常关键：

更改目录到您的文档根目录。对我来说，它是/var/www/my_app：

cd /var/www/my_app

创建 .htaccess 文件：

sudo nano .htaccess

添加以下内容：

Options -MultiViews
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

保存并退出文件。

接下来，我们需要允许Apache读取位于文档根目录下的.htaccess文件。对于我来说，它是/var/www/my_app：

<Directory "/var/www/my_app">
  Options FollowSymLinks MultiViews
  AllowOverride All
  DirectoryIndex index.html
  Order deny,allow
  Allow from all
</Directory>

保存并关闭文件，然后重新启动httpd服务：

sudo systemctl restart httpd

资源: 在CentOS 7上安装和配置Apache的Mod_rewrite

就这样。

希望这可以帮到你。

- Promise Preston

Answer 4

对于那些没有使用默认的Apache虚拟主机配置（如*：80），而是在本地测试环境中使用类似test.local这样的域名的人，请参考以下内容，这对我起到了作用。

我不得不添加标签并进行重写代码。

<VirtualHost react.myapp.local>

    ServerName react.myapp.local
    ServerAdmin react.myapp.local
    DocumentRoot "C:/xampp/htdocs/react-myapp/build"

    <Directory "C:/xampp/htdocs/react-myapp/build">
        RewriteEngine On
        #check for files and do not redirect
        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>

    ErrorLog "logs/react.myapp.local-error.log"
</VirtualHost>

我在Windows上使用XAMPP，并且想要在我的本地Apache服务器上托管一个React应用程序。

- Sabin Chacko