Question

未捕获错误： useNavigate() 只能在 <Router> 组件上下文中使用

2022-01-11

18520

reactjs react-router react-router-dom

大家好，我遇到了这个问题，不知道该如何解决尝试了所有方法来解决它这是因为最新的路由器库版本吗只需向您显示代码补丁即可

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 的位置更高的位置，但目前情况并非如此。您在 App 中调用 useNavigate ，但 Router 在 App 内部，而不是在 App 树的更高位置。

您可能希望拆分您的组件。如下所示：

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