代码之家 › 专栏 › 技术社区 › Fr4sha

如何使用react router dom从一个nx应用程序路由到另一个本地主机端口上的nx应用

nomachine-nx reverse-proxy react-router

Fr4sha · 技术社区 · 3 年前

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

我已经试着用 useNavigate(/terminal) 以及将/terminal重定向到localhost:4100的反向代理。当我登录登录页面时,我只会重定向到localhost:420/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
  }
}

0 回复 | 直到 3 年前

Drew Reese 3 年前

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);
  }
};