Nginx部署双React应用时路由跳转异常、刷新返回404问题求助

1. Nginx配置核心问题修复 #

你当前的Nginx配置存在两处直接导致刷新404的错误：

• /admin 路径的try_files回退地址配置错误，会跳转到根应用的/index.html，而非后台应用的入口文件
• 两个location的try_files末尾多余=404配置，不符合单页应用所有路径回退到入口html的要求
• 未添加优先级匹配规则，部分场景下/admin前缀路径会被根路径location匹配

修改后的Nginx配置片段如下：

resolver 1.1.1.1 1.0.0.1;

root /usr/share/nginx/html/client/build/;
index index.html;

location ^~ /admin {
    gzip_static on;
    alias /usr/share/nginx/html/admin/build/;
    index index.html index.htm;
    # 回退地址改为/admin/index.html，保证所有/admin前缀路径返回后台应用入口
    try_files $uri $uri/ /admin/index.html;
}

location / {
    gzip_static on;
    index index.html index.htm;
    # 移除多余的=404，所有根路径下不存在的资源回退到客户端应用入口
    try_files $uri $uri/ /index.html;
}

修改完成后重启Nginx即可解决刷新/admin路径返回客户端404的问题。

2. 路由跳转路径错误修复 #

你访问/admin后跳转到/dashboard而非/admin/dashboard的问题，是跳转逻辑未正确识别Router的basename导致：

• 你已经在Router上正确配置了basename="/admin"，所有React Router内部的跳转方法（如v5的history.push、<Redirect>，v6的useNavigate）都会自动拼接/admin前缀
• 排查登录成功后的跳转逻辑，如果使用了window.location.href = '/dashboard'这类硬编码的原生跳转，会跳过basename拼接，改成React Router提供的跳转方法即可
• 你当前的PrivateRoute里未登录跳转pathname: '/'的写法是正确的，会自动跳转到/admin/后台登录页，无需修改

3. 可选校验项 #

你已经配置了管理后台package.json的homepage字段为https://example.com/admin/，build后的静态资源路径会自动带上/admin前缀，和上述Nginx配置完全匹配，无需额外调整。

修改完成后可直接测试：

• 访问/admin会正常跳转到/admin/dashboard
• 刷新任意/admin/xxx路径不会返回根应用404
• 直接访问根应用路由（如/project）可正常加载，不会出现404

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