ReactJS应用部署至服务器后刷新页面出现404错误的问题咨询

嘿，这个问题我太熟了——React单页应用部署后刷新就404，几乎是每个前端开发者都会踩的坑，别慌，我来给你拆解清楚原因和解决办法！

React是单页应用（SPA），所有路由逻辑都是在客户端浏览器里处理的，而不是服务器。

本地开发时，create-react-app自带的开发服务器已经帮你处理了这个问题：不管你访问哪个路由，它都会把index.html返回给浏览器，让React的客户端路由接手。但部署到生产服务器后，服务器不知道这些客户端路由对应的物理文件——比如你刷新/about页面时，服务器会直接去磁盘上找about这个文件/目录，找不到就返回404了。

1. Nginx服务器配置 #

如果用Nginx部署，修改Nginx配置文件（通常在/etc/nginx/sites-available/或/etc/nginx/nginx.conf），让所有非静态资源的请求都指向index.html：

server {
  listen 80;
  server_name your-domain.com; # 替换成你的域名
  root /path/to/your/react/app/build; # 替换成你的build目录路径
  index index.html;

  # 处理静态资源（js、css、图片等），设置缓存优化性能
  location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }

  # 核心逻辑：所有其他请求都返回index.html，交给React路由处理
  location / {
    try_files $uri $uri/ /index.html;
  }
}

修改完成后重启Nginx生效：

sudo systemctl restart nginx

2. Apache服务器配置 #

在你的React项目build目录下创建一个.htaccess文件，添加以下规则：

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

这个配置的意思是：如果请求的不是真实存在的文件或目录，就把请求转发到index.html。记得确保Apache的mod_rewrite模块已经启用。

3. Express（Node.js后端）部署 #

如果你的React和Express后端一起部署，在Express代码里添加一个兜底路由，让所有非API请求都返回index.html：

const express = require('express');
const path = require('path');
const app = express();

// 服务React的静态资源
app.use(express.static(path.join(__dirname, 'build')));

// 所有非API请求都返回index.html
app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

4. 临时方案：改用HashRouter #

如果你暂时不想修改服务器配置，可以把React的BrowserRouter换成HashRouter。它会在URL中添加#（比如your-domain.com/#/about），这种哈希路由不会向服务器发送请求，所有路由逻辑都在客户端处理，自然不会出现404。不过缺点是URL不够美观，且对SEO不太友好，适合快速调试场景。

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