解决Nginx部署React应用刷新404问题

当使用Nginx部署React应用时，刷新页面出现404错误是一个常见问题。这是因为React使用客户端路由，而Nginx默认配置会尝试在服务器上寻找对应的文件路径。

问题原因

React应用使用HTML5的history.pushState API实现客户端路由。当用户直接访问某个路由或刷新页面时，Nginx会尝试在服务器上寻找对应的文件路径，但该路径实际上是由React在客户端处理的。

解决方案

方法1：修改Nginx配置

在Nginx配置中添加try_files指令，将所有请求重定向到index.html：

server {
    listen       80;
    server_name  yourdomain.com;

    root   /path/to/your/react/app/build;
    index  index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

方法2：处理API请求

如果你的应用有后端API，需要确保API请求不会被重定向到index.html：

server {
    listen       80;
    server_name  yourdomain.com;

    root   /path/to/your/react/app/build;
    index  index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://backend_server;
        # 其他代理配置...
    }
}

方法3：使用base路径

如果你的React应用部署在子路径下（如/app/），需要做以下调整：

1. 在React项目中设置homepage（在package.json中）或basename（在Router组件中）
2. 修改Nginx配置：

server {
    listen       80;
    server_name  yourdomain.com;

    root   /path/to/your/react/app/build;
    index  index.html;

    location /app/ {
        try_files $uri $uri/ /app/index.html;
    }
}

验证配置

修改配置后，执行以下命令验证并重新加载Nginx：

sudo nginx -t       # 测试配置是否正确
sudo nginx -s reload # 重新加载配置

其他注意事项

1. 确保React项目已正确构建（运行npm run build）
2. 检查Nginx是否有权限访问构建文件
3. 如果使用HashRouter而不是BrowserRouter，可以避免这个问题，但URL中会有#符号

通过以上配置，React应用的路由应该能够在刷新时正常工作，而不再返回404错误。