I am trying to redirect the user after entering the correct credentials, but my frontend is putting out this Error "Uncaught (in promise) TypeError: navigator is undefined". I couldn't really find any solution so I was hoping to get some help here.

This is is the part of my code which throws the error: It only happens in case of correct input (meaning the input data was found inside of the database), so when redirect is called.

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;

This is my routing code:

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

The complete error message looks like this:

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

I tried to put my redirect constant at different places, but that did not work so far, as I am still new to React and try to find my way around it.

CodePudding user response：

Issue

You are using the low-level Router component which is missing some required props.

See Router

declare function Router(
  props: RouterProps
): React.ReactElement | null;

interface RouterProps {
  basename?: string;
  children?: React.ReactNode;
  location: Partial<Location> | string; // <-- required
  navigationType?: NavigationType;
  navigator: Navigator;                 // <-- required
  static?: boolean;
}

import { Routes, Route, Router } from "react-router-dom"; // <-- Router
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={"/"}> // <-- Missing `navigator` prop!!
      <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>
  );
}

Solution

Import and use one of the high-level routers, e.g. BrowserRouter, MemoryRouter, etc.

import { Routes, Route, BrowserRouter } 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 (
    <BrowserRouter>
      <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>
    </BrowserRouter>
  );
}

CodePudding user response：

  const redirect = useNavigate();
  async function handleLogin() {
    try {
        const success = await Api.login(username, password);
        redirect('/home');
    } catch (error) {
        console.log(error);
    }
  }