我尝试在输入正确的凭据后重定向用户，但我的前端却出现了这个错误“未捕获（在承诺中）TypeError：导航器未定义”。我真的找不到任何解决方案，所以我希望在这里得到一些帮助。

这是我的代码中引发错误的部分：它仅在正确输入的情况下发生（意味着在数据库内找到输入数据），因此当调用 redirect 时。

import { useParams, useNavigate, Route } from "react-router"; 

const Login = () => {
  const redirect = useNavigate();
  async function handleLogin() {
    try {
    const success = await Api.login(username, password);
    redirect('/home'); // Console says this line is where the error comes form
    } catch (error) {
      console.log(error);
    }
  }

  const [username, setUserName] = useState('');
  const [password, setPassword] = useState('');
  return (
    <div className="cover">
      <div className="headline">
        <h1>Login</h1>
      </div>
      <form>
        <InputField placeholder={"Benutzername"} onChange={setUserName} />
        <InputField placeholder={"Passwort"} isPassword onChange={setPassword} />
      </form>

      <Button active
        onClick={handleLogin}>
        Login
      </Button>

      <p className="text">
        Noch nicht registriert? <a href="#">Hier Account erstellen.</a>{" "}
      </p>

      <div className={popupStyle}>
        <h3>Login Failed</h3>
        <p>Username or password incorrect</p>
      </div>
    </div>
  );
};

export default Login;

这是我的路由代码：

Routing.js

import { Routes, Route, Router } from "react-router-dom";
import Login from "../components/Login";
import Home from "../components/Home";
import NoNavRouting from "./NoNavRouting";
import NavRouting from "./NavRouting";

export default function Routing() {
  return (
    <Router location={"/"}>
      <Routes>
        <Route element={<NoNavRouting />}>
          <Route path="/" element={<Login />} />
        </Route>
        <Route element={<NavRouting />}>
          <Route path="home">
            <Route index element={<Home />} />
            <Route path=":userId" element={<Home />} />
          </Route>
        </Route>
      </Routes>
    </Router>
  );
}

NoNavRouting

import React from "react";
import { Outlet } from "react-router";

export default function NoNavRouting() {
  return <Outlet />;
}

NavRouting

import React from "react";
import NavBar from "../components/Navbar";
import { Outlet } from "react-router";

export default function NavRouting() {
  return (
    <>
      <NavBar />
      <Outlet />
    </>
  );
}

完整的错误消息如下所示：

TypeError: navigator is undefined
    navigate hooks.tsx:211
    handleLogin Login.jsx:39
    React 23
    js index.js:5
    factory react refresh:6
    Webpack 3

我尝试将重定向常量放在不同的地方，但到目前为止没有奏效，因为我对 React 还不熟悉，并且试图找到解决方法它。