Creé una aplicación en la que estoy implementando el enrutamiento usando react-router-dom.
Entonces, el escenario es cuando un usuario inicia sesión, se le redirige a localhost: 3000/ URL de inicio y se muestra la página de inicio. Cuando cierra la sesión, llega a la página de destino que se encuentra en localhost:3000 .
Pero si el usuario cambia la url a localhost:3000 cuando inicia sesión, todo queda en blanco y se muestra como iniciado sesión, creo que este es el comportamiento predeterminado de enrutamiento.
El requisito es redirigir al usuario a la página de inicio hasta que inicie sesión, incluso si cambia la URL escribiendo localhost en el navegador.
agregue una condición para verificar si el usuario inició sesión y use Navigate from react-router-dom para redirigir al usuario. agrega esto en tu componente
return ( { ("add condition here to check if user is login") ? ( <Navigate to="/home " /> ) : (<div>Component body</div>) } )Intente, si no inicia sesión, redirija a la página de inicio de sesión y el usuario de inicio de sesión luego redirige a la página de inicio de sesión.
<HashRouter> {!auth.token && ( <Routes> <Route path="/" element={<Login />} /> <Route path="*" element={<Navigate to="/" />} /> </Routes> )} {auth.token && ( <> <Routes> <Route exact path="/home" element={<Home />} /> <Route path="*" element={<Navigate to="/home" />} /> </Routes> </> )} </HashRouter>Hola, tu problema es fácil de resolver, solo estructura tus rutas de esta manera:
<Route exact path="/login" render={() => { if (userLoggedIn) { return <Redirect to="/home" />; } return <LoginPage />; }} />O hazlo de esta manera:
<Route exact path="/home" render={() => { if (!userLoggedIn) { return <Redirect to="/login" />; } return <HomePage/>; }} />Espero que esto te ayude, si necesitas alguna otra aclaración, por favor mencióname en los comentarios a continuación.