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运行命令为http-server ./build -p 7001

Answer 1

如果您使用的是Apache HTTP Server，则需要在公用文件夹中创建一个.htaccess文件，如下所示：

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

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

Answer 2

为了避免Apache服务器上出现404错误，您必须启用 mod_rewrite 并在根目录中添加 .htaccess 文件

步骤1-启用mod_rewrite

首先，我们需要激活 mod_rewrite 。它可用，但未安装全新的Apache 2。

sudo a2enmod rewrite

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

sudo systemctl restart apache2

或

sudo service apache2 restart

第2步-设置.htaccess

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

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

在该文件中，您会发现从第一行开始的块。在该块内部，添加以下新块，以便您的配置文件如下所示。确保所有块都正确缩进。

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

    . . .
</VirtualHost>

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

sudo systemctl restart apache2

或

sudo service apache2 restart

第3步-创建.htaccess

现在，在Web根目录中创建以下.htaccess文件。

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

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

我已参考React的文档和digital Ocean的服务器设置

Answer 3

要详细介绍sparsh turkane' answer，在CentOS服务器上工作时遇到了挑战。

这是我修复的方式：

在CentOS上默认启用mod_rewrite模块。如果发现服务器上未启用它，则可以通过编辑00-base.conf目录中的/etc/httpd/conf.modules.d/文件来启用它：

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读取位于Document根目录下的.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

资源：Install And Configure Mod_rewrite For Apache On CentOS 7

仅此而已。

我希望这会有所帮助

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

3 个答案: