Problem with React Router navigate() and UseEffect - reactjs

Question

I have problem with react-routerand useEffect. When I want to login user, useEffecshould take userData from cookie, and ˙navigate` user to different component. But it stuck.
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]);
This is error in console.
I hope you can help me, if you need anything else just let me know.
This is my code from all components.
<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 /> component
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;

Answer 1

You are using wrong approach for this, why arent you using navigate() in login ?
const login = (e) => {
e.preventDefault();
Axios.post("http://localhost:3001/login", {
username: username,
password: password,
}).then((response) => {
navigate('/')
});
};
This will redirect the user after successful login.
UPDATE -
Noted that you said in refreshing case it would fail.
Why are you using that e in login? Login doesn't really need an Event I guess !
May be that (e) is preventing the app from refreshing the state! can you try without it ?

Answer 2

Only redirect if the path is /login. This will not cause an infinite loop because it will not redirect unless the path is /login
import { useLocation, useNavigate } from "react-router-dom";
const location = useLocation();
useEffect(() => {
if (userData && location.pathname === "/login") {
navigate("/");
}
}, [userData, location.pathname]);
Note: your login in path might be different, if so just swap out "/login" to the path you're using.