Nginx反向代理配置问题：移除/app2路径前缀并正确路由至目标React应用

咱们先梳理下你遇到的核心问题：

• 通过http://127.0.0.1:8080/app2访问第二个React应用时，路由总是匹配到通配符组件，但直接访问5300端口却正常
• Nginx里的rewrite规则和if判断处理静态资源时逻辑绕，还容易引发路径匹配问题

问题根源 #

1. React路由不知道子路径前缀：你的第二个React应用默认以为自己运行在根路径/下，但通过代理访问时实际处于/app2子路径中。BrowserRouter会把/app2/test解析成根路径下的/test，而你的路由配置里要么没有对应匹配项，要么匹配顺序导致最终落到通配符路由上。
2. Nginx未处理单页应用路由回退：单页应用刷新或直接访问子路由时，浏览器会向Nginx发起对应路径的请求，此时Nginx需要把这些请求转发到React的index.html，交给前端路由处理，而不是返回404。

解决方案 #

第一步：修正Nginx反向代理配置

把你原来的/app2相关配置替换成下面的内容，去掉复杂的if和rewrite，用更简洁可靠的方式处理：

# 处理/app2的重定向，确保末尾带斜杠，避免路径匹配歧义
location = /app2 {
    return 302 /app2/;
}

# 处理/app2下的所有请求
location /app2/ {
    # 转发到目标应用，末尾的/很关键，Nginx会自动移除/app2/前缀
    proxy_pass http://127.0.0.1:5300/;
    # 传递正确的请求头，避免目标应用获取错误的主机信息
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

    # 处理单页应用路由回退：如果请求的文件不存在，转发到index.html让前端路由处理
    try_files $uri $uri/ /index.html;
}

配置说明：

• proxy_pass末尾的/：Nginx会自动把/app2/xxx转换成/xxx转发到5300端口，不需要额外的rewrite规则
• try_files：当用户刷新/app2/test这类路由时，Nginx找不到对应的静态文件，就会把请求转发到React的index.html，让前端路由去解析路径
• 替换Host头为$host：让目标应用拿到正确的请求主机地址，避免静态资源路径错误

第二步：配置React应用的base路径

修改第二个React应用的BrowserRouter，添加basename="/app2"属性，让它明确知道自己运行在/app2子路径下：

<BrowserRouter basename="/app2">
  <Routes>
    <Route path="/" element={<Comp2 />} />
    <Route path="/test" element={<Comp2 />} />
    <Route path="/aaa" element={<Comp2 />} />
    <Route path="/bbb" element={<Comp />} />
    <Route path="*" element={<Comp />} />
  </Routes>
</BrowserRouter>

额外优化：如果是生产构建，建议在build时设置PUBLIC_URL环境变量，确保静态资源路径正确：

# Linux/macOS环境
PUBLIC_URL=/app2 npm run build

# Windows环境
set PUBLIC_URL=/app2 && npm run build

验证效果 #

1. 重启Nginx服务加载新配置
2. 重新构建并启动第二个React应用
3. 访问http://127.0.0.1:8080/app2，应该能正常加载首页；访问http://127.0.0.1:8080/app2/test，也能正确匹配到对应的组件，刷新页面也不会出现404或通配符组件的问题

备注：内容来源于stack exchange，提问作者Asmaa