React应用Docker部署后刷新二级路由出现404(Nginx/1.27.0)问题求助

问题根源 #

React是单页应用（SPA），前端路由逻辑完全在浏览器端处理。当你刷新或直接访问/admin/tenants这类二级路由时，Nginx会默认去服务器的物理目录中寻找对应路径的文件，但这个路径并不存在（实际只有根目录的index.html是唯一入口），因此返回404错误。

修改后的Nginx配置 #

将你的custom-nginx.conf替换为以下内容：

server {
    listen       80;
    server_name  localhost;

    root   /usr/share/nginx/html;
    index  index.html index.htm;

    error_page   500 502 503 504  /50x.html;

    # 核心配置：处理SPA路由
    location / {
        try_files $uri $uri/ /index.html;
    }

    location ~^/test/ {
        alias /usr/share/nginx/public;
        # 若/test/下也是SPA资源，可添加try_files规则，否则保留原配置
        # try_files $uri $uri/ /test/index.html;
    }

    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

关键配置说明 #

• try_files $uri $uri/ /index.html;：Nginx会依次尝试：
  1. 匹配请求对应的物理文件（$uri），比如静态资源（js、css、图片）
  2. 匹配请求对应的物理目录（$uri/）
  3. 若前两者都找不到，直接返回根目录的index.html，交给React的前端路由处理所有路径逻辑
• 如果/test/路径下也是SPA应用，可以在该location块内添加同样的try_files规则，否则保留原配置即可

验证步骤 #

1. 重新构建Docker镜像：docker build -t your-react-app .
2. 启动容器测试：docker run -p 32768:80 your-react-app
3. 访问二级路由并刷新，确认不再出现404错误

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