How to route from a nx app to another nx app on a different localhost port with react router dom

Question

我在一个名为 admin 的 NX 应用程序中有一个登录页面，当登录成功时，我想将用户重定向到我在不同端口上运行的另一个 NX 应用程序终端。管理员在 localhost:4200 上运行，在 localhost:4100 上运行终端。

我已经尝试使用

useNavigate(/terminal)

和将 /terminal 重定向到 localhost:4100 的反向代理来实现此目的。当我登录登录页面时，我只会被重定向到 localhost:4200/terminal，但我需要被重定向到 localhost:4100。 这是我的登录页面

这是我的登录页面：

import { MouseEvent, useState } from 'react';
import styles from './login-form.module.scss';
import { useLogin } from '../../api/use-login';
import classNames from 'classnames';
import { Icon } from '@iconify/react';
import {useNavigate} from "react-router-dom";




/* eslint-disable-next-line */
export interface LoginFormProps {}

export function LoginForm(props: LoginFormProps) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);

  const [loginError, login] = useLogin();

  const navigate = useNavigate();


  const handleSubmit = async (e: MouseEvent) => {
    e.preventDefault();
   try {
     await login({ username, password });
     navigate("/terminal");

   } catch (error: any){
     console.log(error.message);
   }

  };

  return (
    <form className={styles['container']}>
      {/* username */}
      <div className="form-field">
        <Icon icon="carbon:user" className="prefix"></Icon>
        <input
          id="username"
          type="text"
          value={username}
          placeholder="Username"
          onChange={(e) => setUsername(e.target.value)}
        />
      </div>

      {/* password */}
      <div className="form-field form-field-group">
        <Icon icon="carbon:password" className="prefix"></Icon>
        <input
          id="password"
          type={showPassword ? 'text' : 'password'}
          value={password}
          placeholder="Password"
          onChange={(e) => setPassword(e.target.value)}
        />
        <button
          type="button"
          title={showPassword ? 'hide password' : 'reveal password'}
          onClick={() => setShowPassword(!showPassword)}
        >
          <Icon icon={showPassword ? 'carbon:view-off' : 'carbon:view'}></Icon>
        </button>
      </div>

      {/* login error */}
      {loginError && (
        <div className={classNames('error icon', styles['error'])}>
          <Icon icon="carbon:warning"></Icon>
          {loginError}
        </div>
      )}



      {/* login */}
      <button
        type="submit"
        className="secondary fill inline-icon"
        onClick={handleSubmit}
      >
        <Icon icon="carbon:login"></Icon>
        <span>Login</span>
      </button>

    </form>
  );
}

export default LoginForm;

这是我的反向代理：

{
  "/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
  },
  "/admin": {
    "target": "http://localhost:4200",
    "secure": false
  }
}

Answer 1

react-router

只会在一个 React 应用程序内导航，如果您需要强制导航到外部 URL，您可以使用

window.open

或通过设置

window.location.href

值进行重定向。

例子：

const handleSubmit = async (e: MouseEvent) => {
  e.preventDefault();
  try {
    await login({ username, password });
    window.open("http://localhost:4100/terminal", "_self", "noreferrer");
  } catch (error: any){
    console.log(error.message);
  }
};

或

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