我在使用react-router和useEffect时遇到了问题。当我想登录用户时，useEffec应该从cookie中获取userData，并将用户导航到不同的组件。但它卡住了。

const login = (e) => {
e.preventDefault();
Axios.post("http://localhost:3001/login", {
  username: username,
  password: password,
}).then((response) => {
  setUserData(response.data);
});
};

 useEffect(() => {
if (userData) {
  navigate("/");
}
}, [userData]);

这是控制台中的错误。

我希望你能帮助我，如果你还需要什么就告诉我。
这是所有组件的代码。
<Login />

import React, { useState, useEffect } from "react";

import Axios from "axios";

import { useLocation, useNavigate } from "react-router-dom";

import classes from "./Login.module.css";

const Login = ({ setUserData, userData }) => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const navigate = useNavigate();
const location = useLocation();

Axios.defaults.withCredentials = true;

const login = (e) => {
e.preventDefault();
Axios.post("http://localhost:3001/login", {
  username: username,
  password: password,
  }).then((response) => {
  setUserData(response.data);
  window.location.reload(true);
  });
 };

 useEffect(() => {
  if (userData) {
  navigate("/");
  }
 }, [userData]);

return (
 <div className={classes.container}>
  <div className={classes.slika}>
    <img src="./utilities/scientisc.svg" />
  </div>
  <div className={classes.login_content}>
    <form onSubmit={login}>
      <div className={classes.formBorder}>
      <img className={classes.avatar} src="utilities/test.png" />
      <h2 className={classes.title}>Welcome</h2>
      <div /* className={`${classes.input_div} ${classes.one}`} 
         */>
        <div className={`${classes.inputDiv} ${classes.one}`}>
          <h5 className={classes.label}>Korisničko ime</h5>
          <input
            onChange={(e) => {
              setUsername(e.target.value);
            }}
            type="text"
            className={classes.input}
          />
        </div>
      </div>
       <div /* className={`${classes.input_div} ${classes.pass}`} 
      */>
        <div /* className="div" */>
          <h5 className={classes.label}>Lozinka</h5>
          <input
            onChange={(e) => {
              setPassword(e.target.value);
            }}
            type="password"
            className={classes.input}
          />
        </div>
      </div>

      <button type="submit" className={classes.button}>
        Prijavi se
      </button>
      </div>
    </form>
    <h3 className={classes.labelUpozorenja}>{userData?.message} 
    </h3>
   </div>
  </div>
 );
};
 export default Login;

<App />组件

import "./App.css";
             import { BrowserRouter as Router, Routes, Route } from "react- 
router- 
dom";
import Login from "./pages/Login";
import PrivateRoutes from "./utils/PrivateRoutes";
import { useState, useEffect } from "react";
import Axios from "axios";
import SideMenu from "./components/SideMenu/SideMenu";

 function App() {
 const [userData, setUserData] = useState();
 const [checking, setChecking] = useState(true);

 useEffect(() => {
  Axios.get("http://localhost:3001/login")
  .then((response) => {
    if (response.data.loggedIn == true) {
      setUserData(response.data);
    }
    return;
  })
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    setChecking(false);
  });
 }, []);

  const handleClick = async () => {
  try {
  await Axios.post("http://localhost:3001/logout", {
    name: "userId",
  });
  window.location.reload(true);
   } catch (error) {
   console.error(error);
   }
   };
  return (
   <div className="App">
    <Router>
    <Routes>
      <Route
        element={<PrivateRoutes userData={userData} checking= 
     {checking} />}
      >
        <Route element={<SideMenu handleClick={handleClick} 
     userData={userData} />} path="/" exact />
        {/*  <Route element={<Products />} path="/products" /> 
      */}
      </Route>
      <Route
        element={<Login setUserData={setUserData} userData= 
       {userData} />}
        path="/login"
      />
    </Routes>
  </Router>
  </div>
  );
  }

  export default App;

<PrivateRoutes />

import { Outlet, Navigate } from "react-router-dom";
import React from "react";

const PrivateRoutes = ({ userData, checking }) => {
return checking ? (
<p>Checking...</p>
 ) : userData?.loggedIn ? (
<Outlet />
) : (
<Navigate to="/login" />
);
};

export default PrivateRoutes;