Uncaught Error: useNavigate() may be used only in the context of a <Router> component

Question

大家好，遇到这个问题不知道怎么解决尝试了一切来解决这个问题这是因为最新的路由器库版本只是给你看代码补丁

import "./App.css";
import Form from "./Form";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  useNavigate,
  
} from "react-router-dom";
import { useEffect, useState } from "react";
import { app } from "./firebase-config";
import {
  getAuth,
  signInWithEmailAndPassword,
  createUserWithEmailAndPassword,
} from "firebase/auth";
import Home from "./Home";

function App() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const[data,setData]=useState({});
    let navigate = useNavigate();

  useEffect(() => {
    let authToken = sessionStorage.getItem("Auth Token");

    // if (authToken) {
    //   // navigate("/home");
    //   window.location.href = "/home";
    console.log(data);
    // }
  }, []);
  const handleAction = (id) => {

    console.log(id);
    const authentication = getAuth();
    if (id === 2) {
      createUserWithEmailAndPassword(authentication, email, password).then(
        (response) => {
          sessionStorage.setItem(
            "Auth Token",
            response._tokenResponse.refreshToken
          );
          setData(response._tokenResponse);
           navigate('/home');
          window.location.href = "/home";

          console.log(response);
        }
      );
    } else if (id === 1) {
      console.log("response");

      signInWithEmailAndPassword(authentication, email, password).then(
        (response) => {
          console.log(response);
          setData(response._tokenResponse);

          sessionStorage.setItem(
            "Auth Token",
            response._tokenResponse.refreshToken
          );
           navigate("/home");
          // window.location.href = "/home";
        }
      );
    }
  };
  return (
    <Router>
      <div className="App">
        <>
          <Routes>
            <Route
              path="/login"
              element={
                <Form
                  title="Login"
                  setEmail={setEmail}
                  setPassword={setPassword}
                  handleAction={() => handleAction(1)}
                  data={data}
                />
              }
            />
            <Route
              path="/register"
              element={
                <Form
                  title="Register"
                  setEmail={setEmail}
                  setPassword={setPassword}
                  handleAction={() => handleAction(2)}
                  data={data}
                />
              }
            />
            <button onClick={() => navigate(-1)}>go back</button>

            <Route path="/home" element={<Home data={data} />} />
          </Routes>
        </>
      </div>
    </Router>
  );
}

export default App;

在控制台上也遇到了这个错误

Uncaught Error: useNavigate() may be used only in the context of a component. at invariant (index.tsx:19) at useNavigate (index.tsx:507) at App (App.js:23) at renderWithHooks (react-dom.development.js:14985) at mountIndeterminateComponent (react-dom.development.js:17811) at beginWork (react-dom.development.js:19049) at HTMLUnknownElement.callCallback (react-dom.development.js:3945) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994) at invokeGuardedCallback (react-dom.development.js:4056)

小帮手已申请

删除 useNavigate() 后一切正常

Answer 1

您的 <Router> 需要比您使用 useNavigate 的组件树更高，但目前情况并非如此。您在应用程序中调用 useNavigate，但 Router 在内部应用程序，而不是应用程序树的更高层。

您可能希望拆分组件。像这样：

function App() {
  return (
    <Router>
      <SomeOtherComponent/>
    </Router>
  )
}

function SomeOtherComponent() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [data,setData] = useState({});
  let navigate = useNavigate();

  // ... etc. Code is exactly the same as yours, just no Router in the return

  return (
    <div className="App">
      <>
        <Routes>
          // etc
        </Routes>
      </>
    </div>
  )
}

Uncaught Error: useNavigate() may be used only in the context of a <Router> component

Uncaught Error: useNavigate() may be used only in the context of a <Router> component

reactjs

react-router

react-router-dom