Estoy tratando de implementar la funcionalidad de inicio de sesión en mi aplicación, pero cada vez que realizo una recarga FRESCA e intento redirigir a mi página de inicio, entra en un bucle infinito. ¿Cómo puedo resolver esto?

** Nota **

He refactorizado esto de muchas maneras con y sin estado de reacción en su lugar y muchas formas de redirigir, pero de cero a ninguna suerte, simplemente se repite infinitamente de diferentes maneras. Mi método actual no genera un error en la consola, son solo los registros de 'montaje' y 'redi' que leerá en mi código en bucle infinito hasta que mi CPU muera. Código de referencia

 // Other Imports. lke axios, useEffect and components from bootstrap. import { ReactSession } from 'react-client-session'; import { Redirect } from "react-router-dom"; const Login = () => { const { handleSubmit, register } = useForm(); const BASE_URL = process.env.REACT_APP_BASE_URL let [error, setError] = useState(false) let [errorMessage, setErrorMessage] = useState('') let [loginToken, setToken] = useState('') const login = async (data, e ) => { try { let loginData = { email: data.email, password: data.password, } let res = await axios.post(BASE_URL + '/users/admin/login', loginData) if (res.status === 200) { ReactSession.set('token', res.data.token) // return <Redirect to="/admin/index" /> setToken(res.data.token) }} catch (error) { setError(error) setErrorMessage("There's been a problem while you were loggin in") } } useEffect(() => { const token = ReactSession.get("token"); setToken(token) console.log('mounting') }, [loginToken]) if (loginToken){ console.log('redi') return <Redirect to="/admin/meals" /> } return ( // Login Form components.

Una copia de mi enrutador para referencia.

 // More Imports import AdminLayout from "layouts/Admin.js"; import AuthLayout from "layouts/Auth.js"; ReactSession.setStoreType("localStorage"); const token = ReactSession.get("token"); ReactDOM.render( <BrowserRouter> <Switch> <Route path="/auth" render={(props) => <AuthLayout {...props} />} /> <Route path="/admin" render={(props) => token ? <AdminLayout {...props} /> : <Redirect from="*" to="/auth/login" /> } /> {(token) ? <Redirect from="/" to="/admin/index" /> : <Redirect from="*" to="/auth/login" /> } </Switch> </BrowserRouter>, document.getElementById("root") );