Aprende a configurar rutas anidadas en React Router DOM y aplicar lazy loading con Suspense para mejorar una navegación fluida en un Dashboard con vistas overview y settings. Verás cómo usar el asterisco en la ruta padre, definir rutas hijas sin slash, aprovechar Link y renderizar contenido con Outlet, además de un fallback de loading mientras carga el componente.
¿Qué son las rutas anidadas en React Router y cómo se configuran?
Las rutas anidadas permiten navegar dentro de un componente padre como Dashboard. Se crea una ruta padre con asterisco: "dashboard/" para que reconozca subrutas. Luego, se definen rutas internas como overview y settings* sin el slash inicial, cada una con su componente.
- Agrega la página Dashboard al navbar y a las rutas principales.
- Define la ruta padre con asterisco: "dashboard/*".
- Crea las subrutas: "overview" y "settings" sin slash inicial.
- Asigna el componente correspondiente a cada subruta.
- Importa los componentes creados para evitar errores al compilar.
En el componente Dashboard, la renderización de las subrutas ocurre con Outlet. Así, cuando visitas "dashboard/overview" o "dashboard/settings", se muestra el contenido hijo dentro del padre.
¿Cómo navegar entre overview y settings dentro de dashboard?
Para moverte entre las vistas internas, usa Link (importado desde React Router DOM) con rutas relativas: "overview" y "settings". En el Dashboard, coloca una lista de enlaces y evita el slash inicial en la propiedad "to". Inserta Outlet donde quieras que aparezcan las subrutas.
- Usa Link con paths relativos: "overview" y "settings".
- Evita el slash inicial en "to" para mantener la ruta anidada.
- Inserta Outlet en Dashboard para renderizar las subrutas.
- Observa el cambio de URL: "dashboard/overview" y "dashboard/settings".
Cuando haces clic en Dashboard sin subruta, se muestra el contenido base del padre (mensaje de bienvenida). Para ver cada vista, entra a overview o settings desde los enlaces internos.
¿Cómo aplicar lazy loading con Suspense y fallback en settings?
Para cargar de forma diferida el contenido de settings, importa Suspense desde React y envuelve el element de esa ruta. Define un fallback que muestre un indicador (por ejemplo, un div con "loading...") mientras el componente termina de cargar.
- Importa { Suspense } desde React.
- Envuelve el element de la ruta de settings con Suspense.
- Añade un fallback: texto "loading..." o un shimmer.
- Prueba en el navegador: primero verás el loading y luego el componente cargado.
¿Quieres que preparemos una variante con más subrutas o un fallback visual más elaborado? Cuéntame en los comentarios qué te gustaría explorar a continuación.
