Nginx部署React应用后刷新页面返回404错误如何解决

问题核心原因 #

这是客户端路由的典型问题：React项目如果使用BrowserRouter模式的路由，所有路由跳转逻辑都是在前端通过JS执行的，服务器上并不存在对应路由路径的真实静态文件。当你刷新页面时，浏览器会直接向服务器请求当前路径对应的资源，服务器找不到对应文件就会返回404错误。

各服务器环境修复方案 #

1. Nginx 配置 #

修改你站点的Nginx配置文件，在location /块中添加try_files规则，把所有请求都重定向到index.html，交给前端路由处理：

location / {
  root /usr/share/nginx/html; # 替换为你的React打包文件存放路径
  index index.html index.htm;
  # 新增下面这行
  try_files $uri $uri/ /index.html;
}

修改配置后执行nginx -s reload重载配置即可生效。

2. Apache 配置 #

在React打包后的build目录下新建.htaccess文件，写入以下规则：

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

注意要确保Apache已经开启mod_rewrite模块。

3. Caddy 配置 #

修改Caddyfile，在站点配置块中添加try_files规则：

你的域名 {
  root * /path/to/your/react/build # 替换为打包文件路径
  encode gzip
  # 新增下面这行
  try_files {path} /index.html
  file_server
}

修改后重启Caddy服务即可。

4. 静态托管平台配置 #

如果是用云服务的静态托管能力部署，不需要改服务器配置，在托管平台的配置页找到重定向/回退规则，配置所有请求都回退到index.html即可：

• 腾讯云COS/阿里云OSS：配置404页面自定义为/index.html，HTTP响应码设为200
• 其他托管平台：配置通配符规则/*指向/index.html，响应码200

备选临时方案 #

如果暂时没有修改服务器配置的权限，可以把React路由的BrowserRouter替换为HashRouter，这种模式路由会携带#前缀，所有路由请求都不会发送到服务器，自然不会出现404问题，但URL里会多出#字符，美观性和SEO效果略差。

内容的提问来源于stack exchange，提问作者user17149107