Estoy creando un sitio simple para un proyecto, y quiero redirigir al jugador a una página de inicio de sesión si el token está vencido, pero no estoy muy seguro de cómo hacerlo correctamente, esto es lo que he intentado, estoy usando reaccionar -jwt para verificar el token
function App() { return ( <div style={{display:'flex', flexDirection:'column', height:'100vh'}}> <Navbar/> <div style={{display:'flex', flex:1}}> <Routes> <Route path="/login" element ={<LoginForm/>} /> <Route path="/signUp" element ={<SignUpForm/>} /> <Route path="/addMovie" element= {<AddMovie/>} /> <Route path="/" element={isExpired(localStorage.getItem('token') ? <FilmList/> : <LoginForm/> )} /> <Route path="/details" exact element ={<MovieDetails/>} /> </Routes> </div> </div> ); }o algo asi
<Route path="/" render={props=>{ if(isExpired(localStorage.getItem('token'))){ return <Navigate to='/login'/>; } return <FilmList/> }} />El primero simplemente no devuelve nada, y el segundo da una advertencia en la consola:
La ruta de hoja coincidente en la ubicación "/" no tiene un elemento. Esto significa que generará un valor nulo de forma predeterminada, lo que dará como resultado una página "vacía".
¿Hay alguna manera de hacer que funcione?
En react-router-dom v6 se han ido los componentes de ruta personalizados, y el componente de Route debe tener un ReactElement válido en el accesorio del element . Una función es incorrecta. Su segundo fragmento está cerca.
Cree un AuthWrapper para representar condicionalmente un Outlet para una ruta anidada o una redirección.
const AuthWrapper = () => { return isExpired(localStorage.getItem('token') ? <Navigate to="/login" replace /> : <Outlet />; }; Envuelva cualquier ruta que desee proteger en una Route que represente el AuthWrapper .
function App() { return ( <div style={{display:'flex', flexDirection:'column', height:'100vh'}}> <Navbar /> <div style={{display:'flex', flex:1}}> <Routes> <Route path="/login" element={<LoginForm />} /> <Route path="/signUp" element={<SignUpForm />} /> <Route path="/addMovie" element={<AddMovie />} /> <Route element={<AuthWrapper />}> <Route path="/" element={<FilmList />} /> </Route> <Route path="/details" element={<MovieDetails />} /> </Routes> </div> </div> ); }Una solución sería usar el componente Redirect de react-router-dom .
Ingrese a su componente FilmList y en la parte de renderizado haga la siguiente verificación:
if (isExpired(localStorage.getItem('token')){ return <Redirect to='/login' /> } antes de devolver su FilmList 'normal'
PARA RRDv6 que no es compatible con Redirect, puede usar el componente Navigate:
if (isExpired(localStorage.getItem('token')){ return <Navigate to='/login' replace={true} /> }