如何通过React Router Dom实现NX跨端口应用登录后跳转

问题本质 #

useNavigate("/terminal")是React Router的前端路由跳转，仅在当前应用（localhost:4200）的路由体系内切换URL，不会向服务器发送HTTP请求，因此你的反向代理配置无法触发，浏览器自然停留在localhost:4200/terminal。

解决方案 #

方法一：直接跳转目标应用URL（最简单高效） #

登录成功后，使用浏览器原生的页面跳转方法替换useNavigate，直接指向terminal应用的地址：

修改登录页面的handleSubmit函数：

const handleSubmit = async (e: MouseEvent) => {
  e.preventDefault();
 try {
   await login({ username, password });
   // 替换原navigate，直接跳转到terminal应用
   window.location.href = "http://localhost:4100";
 } catch (error: any){
   console.log(error.message);
 }
};

如果需要适配生产环境的域名，可以通过NX环境变量配置目标地址：

// 从环境变量读取目标地址，默认本地开发地址
const TERMINAL_APP_URL = process.env.NX_TERMINAL_APP_URL || "http://localhost:4100";

const handleSubmit = async (e: MouseEvent) => {
  e.preventDefault();
 try {
   await login({ username, password });
   window.location.href = TERMINAL_APP_URL;
 } catch (error: any){
   console.log(error.message);
 }
};

方法二：通过反向代理实现路径统一映射（适合生产环境） #

如果希望通过http://localhost:4200/terminal访问terminal应用，需要调整代理配置+前端跳转逻辑：

1. 更新反向代理配置：添加changeOrigin和pathRewrite（确保请求正确转发到terminal应用的根路径）：

{
  "/api/events": {
    "target": "http://localhost:3333",
    "secure": false
  },
  "/api/login": {
    "target": "http://localhost:3334",
    "secure": false
  },
  "/api/verify": {
    "target": "http://localhost:3334",
    "secure": false
  },
  "/api/users": {
    "target": "http://localhost:3334",
    "secure": false
  },
  "/terminal": {
    "target": "http://localhost:4100",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {"^/terminal": ""}
  },
  "/admin": {
    "target": "http://localhost:4200",
    "secure": false
  }
}

2. 前端跳转逻辑修改：依然使用window.location.href触发服务器请求（不能用useNavigate）：

const handleSubmit = async (e: MouseEvent) => {
  e.preventDefault();
 try {
   await login({ username, password });
   window.location.href = "/terminal";
 } catch (error: any){
   console.log(error.message);
 }
};

3. 确保admin应用路由不拦截/terminal：检查admin应用的React Router配置，不要添加/terminal的路由规则，让请求能落到服务器触发代理转发。

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