首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >刷新页面时服务器上的React应用程序显示404页面

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

Stack Overflow用户
提问于 2018-07-16 16:50:28
回答 3查看 7.6K关注 0票数 2

我正在使用create_react_app构建react应用程序。现在,我将构建迁移到服务器,并使用serve运行应用程序。我的应用程序将从apis加载数据。当我刷新页面时,它显示404页面未找到错误。我也试过用http-server

当我是一些页面/dashboard和参考页面时,它显示404。现在我必须转到BASE_URL/,然后它才能工作。但在我的本地,当我引用时,一切都正常。

这是我的package.json

代码语言:javascript
复制
"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

EN

回答 3

Stack Overflow用户

发布于 2018-07-18 15:38:22

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

步骤1-启用mod_rewrite

首先,我们需要激活mod_rewrite。它是可用的,但没有在全新的Apache2安装中启用。

代码语言:javascript
复制
sudo a2enmod rewrite

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

代码语言:javascript
复制
sudo systemctl restart apache2

代码语言:javascript
复制
sudo service apache2 restart

第2步-设置.htaccess

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

代码语言:javascript
复制
sudo nano /etc/apache2/sites-available/000-default.conf

在该文件中,您将发现从第一行开始的< VirtualHost *:80>块。在该块中,添加以下新块,使您的配置文件如下所示。确保所有块都正确缩进。

代码语言:javascript
复制
<VirtualHost *:80>
    <Directory /var/www/html>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Require all granted
    </Directory>

    . . .
</VirtualHost>

如果您配置了https,您将发现从第一行开始的< VirtualHost *:443>块。在该块中,添加以下新块,使您的配置文件如下所示。确保所有块都正确缩进。在这种情况下,您还需要在下面添加HTTP和HTTPS两个虚拟主机

代码语言:javascript
复制
<VirtualHost *:443>
    <Directory /var/www/html>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Require all granted
    </Directory>

    . . .
</VirtualHost>

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

代码语言:javascript
复制
sudo systemctl restart apache2

代码语言:javascript
复制
sudo service apache2 restart

第3步-创建.htaccess

现在,在web根目录中创建以下.htaccess文件。

代码语言:javascript
复制
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

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

我参考了digital OceanReact和服务器设置文档

票数 19
EN

Stack Overflow用户

发布于 2018-07-16 16:57:03

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

代码语言:javascript
复制
Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

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

票数 5
EN

Stack Overflow用户

发布于 2020-09-29 07:54:53

为了更多地阐述sparsh turkane' answer,我在CentOS服务器上工作时遇到了这个挑战。

这里是我如何修复它的

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

代码语言:javascript
复制
sudo nano /etc/httpd/conf.modules.d/00-base.conf

添加或取消注释以下行:

代码语言:javascript
复制
LoadModule rewrite_module modules/mod_rewrite.so

保存并关闭该文件。

现在,我们可以通过在默认文档根目录中创建一个.htaccess文件来设置URL重写。.htaccess文件允许我们在不访问服务器配置文件的情况下修改重写规则。因此,.htaccess对您的web服务器至关重要:

将目录更改为文档根目录。对我来说,它是/var/www/my_app

代码语言:javascript
复制
cd /var/www/my_app

创建.htaccess文件:

代码语言:javascript
复制
sudo nano .htaccess

添加以下内容:

代码语言:javascript
复制
Options -MultiViews
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

保存并退出文件。

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

代码语言:javascript
复制
<Directory "/var/www/my_app">
  Options FollowSymLinks MultiViews
  AllowOverride All
  DirectoryIndex index.html
  Order deny,allow
  Allow from all
</Directory>

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

代码语言:javascript
复制
sudo systemctl restart httpd

资源Install And Configure Mod_rewrite For Apache On CentOS 7

就这样。

我希望这对有帮助

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51357947

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档