Quiero restringir algunas rutas si mi usuario está conectado, si el usuario está conectado e intenta ir a /login , lo redirigirá a la página de inicio; de lo contrario, lo redirigirá a la página de inicio de sesión.
Estoy usando la API de Laravel con reactjs. Sin embargo, cuando trato de lograr lo que necesito, no funciona y me da este error "Uncaught Error: [Navigate] is not a <Route> component"
Intenté usar <Redirect/> pero se reemplaza en react-router-dom v6
Esto es lo que probé.
import { BrowserRouter as Router, Route, Routes, Navigate} from "react-router-dom"; import Login from "./Login"; <Router> <Routes> <Route path="/" element={<Main/>}/> <Route path="/login"> {localStorage.getItem("auth_token") ? <Navigate to="/"/> : <Route path="/login" element={<Login/>}/>} </Route> <Route path="/login"> {localStorage.getItem("auth_token") ? <Navigate to="/"/> : <Route path="/register" element={<Register/>}/>} </Route> {/* <Route path="/login" element={<Login/>}/> <Route path="/register" element={<Register/>}/> */} </Routes> </Router>EDITAR:
Esto es lo que probé en base a algunas otras preguntas de stackoverflow, todavía no se redirige a la página de inicio de sesión si el usuario no ha iniciado sesión y no se encuentra el token de autenticación.
<Route path="/login" element={localStorage.getItem("auth_token") ? <Navigate to="/" /> : <Login/>}/>Tal vez, puede ingresar a su componente principal y escribir esta línea de código. Ahora no sé cómo está extrayendo los datos, ya sea que el usuario haya iniciado sesión o no, pero tuve una situación similar y usé almacenamiento local para verificar si el usuario ha iniciado sesión o no
if(!loggedInUser) { return <Navigate to="/login" /> }Vaya a Login.js, luego
***import { useNavigate } from "react-router-dom"*** const Login = () => { ***const navigate = useNavigate() if(localStorage.getItem("auth_token")) { navigate('/') }***}
Debe utilizar en este caso.
<Route exact path="/login"> {localStorage.getItem("auth_token") ? <Redirect to="/" /> : <Route path="/login" element={<Login />}/>} </Route>Me alegro de responderte, espero que te ayude!