如何解决React中'Uncaught (in promise) TypeError: navigator is undefined'错误？

问题描述 #

输入正确登录凭证后，调用redirect('/home')时抛出错误：Uncaught (in promise) TypeError: navigator is undefined，错误指向Login组件中redirect('/home')代码行，仅在登录成功时触发。

报错相关代码 #

Login组件代码

import { useParams, useNavigate, Route } from "react-router";
import { useState } from "react"; // 补充遗漏的useState导入

const Login = () => {
  const redirect = useNavigate();
  const [username, setUserName] = useState('');
  const [password, setPassword] = useState('');

  async function handleLogin() {
    try {
      const success = await Api.login(username, password);
      redirect('/home'); // 错误触发位置
    } catch (error) {
      console.log(error);
    }
  }

  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-router-dom的Router组件：Router是底层组件，需要手动传入history对象才能正常工作；而useNavigate依赖的navigator对象由上层路由上下文提供，直接使用未配置history的Router会导致navigator未定义。

修复步骤 #

1. 替换Router为BrowserRouter
   在Routing.js中修改导入和组件使用，BrowserRouter会自动管理history对象，确保useNavigate能获取正确上下文：

   import { Routes, Route, BrowserRouter } from "react-router-dom";
   // ...其他代码不变
   export default function Routing() {
     return (
       <BrowserRouter>
         <Routes>
           {/* 原有路由配置不变 */}
         </Routes>
       </BrowserRouter>
     );
   }
   

2. 补充useState导入
   Login组件中遗漏useState的导入，需补充：

   import { useState } from "react";
   

3. 验证路由配置
   当前/home的嵌套路由配置正确，无需额外修改。

完成上述修改后，redirect('/home')即可正常触发重定向，不会再出现navigator is undefined错误。

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