Tengo una ruta protegida que envuelve mi ruta de diseño para mis otros componentes que usan el componente de diseño.
Tengo un problema con la ruta protegida que no funciona como se esperaba. Si un usuario es nulo, cuando intento acceder a localhost:3000/create, por ejemplo, debería mostrar mi página de destino, pero aparece una pantalla en blanco.
Me di cuenta de que si solo tengo una ruta que contiene un elemento, funciona bien. ¿Qué estoy haciendo mal?
<Router> <Routes> <Route path='/' element={<LandingPage />} /> <Route path='*' element={<NotFound />} /> <Route element={<ProtectedRoutes />}> <Route element={<ResponsiveDrawer />}> <Route path='/dashboard' element={<Dashboard />} /> <Route path='/create' element={<Create />} /> <Route path='/edit/:id' element={<Edit />} /> </Route> </Route> </Routes> </Router> const ProtectedRoutes = () => { const { user } = useContext(UserContext); // console.log(user); return user !== null ? <Outlet /> : <LandingPage />; };ProtectedRoutes representa un componente de Outlet para que se representen los componentes de Route anidados. ResponsiveDrawer también necesita generar un Outlet para cualquier componente Route anidado que esté empaquetando.
<Router> <Routes> <Route path='/' element={<LandingPage />} /> <Route path='*' element={<NotFound />} /> <Route element={<ProtectedRoutes />}> // <-- render Outlet <Route element={<ResponsiveDrawer />}> // <-- render Outlet <Route path='/dashboard' element={<Dashboard />} /> <Route path='/create' element={<Create />} /> <Route path='/edit/:id' element={<Edit />} /> </Route> </Route> </Routes> </Router> La ruta que representa el ResponsiveDrawer se representa en el Outlet del componente ProtectedRoutes y las rutas anidadas se representan en el Outlet del componente ResponsiveDrawer .
Ejemplo ResponsiveDrawer :
const ResponsiveDrawer = () => { // business logic return ( <> {/* UI */} {/* Drawer UI */} <Outlet /> // <-- nested routes render here </> ); };