React应用重载后无法加载抛404错误，Nginx部署路由访问异常求助

问题原因 #

React是单页应用（SPA），所有路由逻辑都在客户端浏览器层面处理。当你直接访问https://example.com/terms这类子路由，或者刷新该页面时，Nginx会默认去服务器文件系统里找对应路径的文件/目录，但这些路径实际并不存在，所以返回404错误。根路径/能正常访问，是因为Nginx默认会加载index.html，之后React的客户端路由才接管页面跳转。

解决方法 #

修改Nginx的站点配置，让所有路由请求都转发到React应用的index.html，由客户端路由处理：

1. 找到你的Nginx站点配置文件，通常在/etc/nginx/sites-available/或/etc/nginx/conf.d/目录下。
2. 修改配置内容，添加关键的路由转发规则：

server {
    listen 443 ssl;
    server_name example.com;

    # 替换为你的SSL证书路径（如果启用HTTPS）
    ssl_certificate /path/to/your/cert.pem;
    ssl_certificate_key /path/to/your/key.pem;

    # 替换为React打包后build目录的绝对路径
    root /path/to/your/react/app/build;
    index index.html;

    # 核心规则：处理所有路由请求
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 可选：静态资源缓存配置，提升加载速度
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

3. 检查配置正确性并重启Nginx：

sudo nginx -t  # 验证配置语法
sudo systemctl restart nginx  # 重启Nginx生效

关键配置说明 #

try_files $uri $uri/ /index.html：Nginx会依次尝试：

• 访问请求路径对应的真实文件（$uri）
• 访问请求路径对应的目录（$uri/）
• 如果前两者都不存在，直接返回index.html，交由React客户端路由处理当前请求。

注意事项 #

• 确保React应用已经执行npm run build生成了build目录，且Nginx配置中的root路径指向该目录的绝对路径。
• 该方案适用于使用BrowserRouter的React应用；如果用的是HashRouter，URL会带#，一般不会出现这类404问题。

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