Estoy usando react-router v6. Estoy tratando de proteger algunas rutas y no dar acceso a los usuarios si no están autenticados. Estoy usando el token para determinar si el usuario está autenticado o no. Después de iniciar sesión en la aplicación usando los detalles de inicio de sesión en lugar de devolver la ruta de todos , no muestra nada. Recibo este mensaje de error en la consola. Se excedió la actualización de profundidad máxima . Sin embargo, si no estoy protegiendo las rutas, funciona bien.
Así estoy protegiendo las rutas.
const token = useSelector(state => state.authDetails.token ); let routes = ( <Routes> <Route path='/signUp' exact element={<SignUpForm />}/> <Route path='/' exact element={<LoginForm />}/> <Route path='*' replace element={<Navigate to="/" />}/> </Routes> ) if(token !== null ) { routes = ( <Routes> <Route path='/todos' element={<AddTodo/>}/> <Route path='/logout' element={<Logout/>}/> <Route path='*' replace element={<Navigate to="/" />}/> </Routes> ) } return ( <div className="App"> <header> <Navbar /> </header> {routes} </div> ); Cuando token !== null , está devolviendo un conjunto de rutas que incluye una redirección a "/" pero no incluye una ruta que representa una ruta para "/" , por lo que la aplicación queda atrapada en un bucle de representación que redirige a un no- ruta existente.
Incluya una ruta con path="/" en su ruta "autenticada", o redirija a una ruta que se está procesando, como `"/todos":
const token = useSelector(state => state.authDetails.token); let routes = ( <Routes> <Route path='/signUp' exact element={<SignUpForm />} /> <Route path='/' exact element={<LoginForm />} /> <Route path='*' element={<Navigate to="/" replace />} /> </Routes> ); if (token !== null) { routes = ( <Routes> <Route path='/todos' element={<AddTodo/>} /> <Route path='/logout' element={<Logout/>} /> <Route path='*' element={<Navigate to="/todos" replace />} /> </Routes> ); } return ( <div className="App"> <header> <Navbar /> </header> {routes} </div> );Una solución mejorada sería crear un componente contenedor autenticado y envolver las rutas que desea proteger.
Ejemplo:
import { Navigate, Outlet } from 'react-router-dom'; const AuthWrapper = () => { const token = useSelector(state => state.authDetails.token); return token !== null ? <Outlet /> : <Navigate to="/" replace />; };...
return ( <div className="App"> <header> <Navbar /> </header> <Routes> <Route path='/signUp' element={<SignUpForm />} /> <Route path='/' element={<LoginForm />} /> <Route element={<AuthWrapper />}> <Route path='/todos' element={<AddTodo />} /> <Route path='/logout' element={<Logout />} /> </Route> <Route path='*' element={<Navigate to="/" replace />} /> </Routes> </div> );Si necesita redirigir condicionalmente a diferentes objetivos en la ruta comodín, cree otro contenedor para manejar la verificación de autenticación.
Ejemplo:
const RedirectWrapper = () => { const token = useSelector(state => state.authDetails.token); return <Navigate to={token !== null ? "/todos" : "/" replace />; };...
return ( <div className="App"> <header> <Navbar /> </header> <Routes> <Route path='/signUp' element={<SignUpForm />} /> <Route path='/' element={<LoginForm />} /> <Route element={<AuthWrapper />}> <Route path='/todos' element={<AddTodo />} /> <Route path='/logout' element={<Logout />} /> </Route> <Route path='*' element={<RedirectWrapper />} /> </Routes> </div> );