Las rutas anidadas en React Router te permiten organizar vistas internas dentro de un componente padre, mientras que el lazy loading con Suspense mejora el rendimiento al cargar componentes solo cuando se necesitan. Esta combinación es clave para cualquier desarrollador frontend que quiera apps más rápidas y mejor estructuradas.
¿Cómo se crean rutas anidadas en React Router?
La idea es montar un componente padre, en este caso Dashboard, y dejar que dentro vivan vistas hijas como Overview y Settings. Para que React Router entienda que hay subrutas, le agregas un asterisco al path del padre.
En la sección de rutas defines algo así: la ruta dashboard/* apunta al componente Dashboard, y dentro de esa ruta declaras las hijas con paths relativos como overview y settings. Nada de slash al inicio en las hijas, solo el nombre.
¿Para qué sirve el asterisco en una ruta de React Router? Le indica al router que esa ruta acepta subrutas anidadas. Todo lo que venga después de dashboard/ será gestionado por las rutas hijas que definas dentro.
¿Cómo se navega entre rutas anidadas?
Dentro del componente Dashboard agregas una lista de enlaces usando el componente Link importado desde react-router-dom. Los to de esos enlaces ya no llevan slash inicial, basta con escribir overview o settings porque son rutas relativas al padre.
Al hacer clic, la URL en el navegador cambia a /dashboard/overview o /dashboard/settings, confirmando que el anidamiento funciona.
¿Qué hace el componente Outlet en React Router?
Aquí viene lo interesante: aunque definas las rutas hijas, no se renderizan solas dentro del padre. Necesitas decirle a React dónde pintarlas. Para eso existe Outlet.
Outlet es un componente de react-router-dom que actúa como el espacio reservado donde se monta la vista hija activa. Lo importas y lo colocas dentro del JSX de Dashboard, en el lugar exacto donde quieres que aparezca Overview o Settings.
¿Qué pasa si no uso Outlet en una ruta padre? Las rutas hijas existirán en la URL pero no se mostrarán en pantalla. Outlet es el encargado de renderizar el componente hijo activo dentro del padre.
Sin Outlet, ves el contenido base del Dashboard pero las vistas anidadas no aparecen aunque la URL sí cambie.
¿Cómo aplicar lazy loading con Suspense en React?
Cuando una vista es pesada, cargarla solo cuando el usuario la solicita evita ralentizar el render inicial. Para eso usas Suspense, un componente que viene directamente de React.
La importación se ve así: import React, { Suspense } from 'react'. Luego, en la definición de la ruta que quieres cargar de forma diferida —por ejemplo, Settings— envuelves el componente con Suspense dentro del element de la ruta.
¿Qué es el fallback en Suspense y por qué es obligatorio?
Suspense requiere una prop llamada fallback. Esa prop define qué se muestra mientras el componente real termina de cargar.
Puedes pasarle desde un texto simple hasta un shimmer o spinner. Ejemplos comunes:
- Un
div con el texto Loading....
- Un componente skeleton que imite la estructura final.
- Un spinner animado.
- Un shimmer con efecto de brillo.
El fallback se renderiza primero y, cuando el componente está listo, se reemplaza por la vista definitiva. Si la página es liviana, el cambio es casi imperceptible; si es pesada, el usuario ve el estado de carga sin pantalla en blanco.
¿Cómo queda la estructura final del Dashboard con rutas anidadas y lazy loading?
La receta combina tres piezas que trabajan juntas:
- Una ruta padre
dashboard/* que apunta al componente Dashboard.
- Rutas hijas
overview y settings declaradas dentro de la ruta padre, con paths relativos sin slash.
- El componente
Dashboard con un menú de Link y un Outlet para renderizar la vista hija activa.
Suspense envolviendo los componentes que quieras cargar de forma lazy, con un fallback definido.
Con esta estructura, navegar a /dashboard muestra el shell del dashboard. Al hacer clic en Overview, la URL pasa a /dashboard/overview y el Outlet renderiza esa vista. Lo mismo con Settings, que además se carga de forma diferida gracias a Suspense.
¿Ya probaste combinar Outlet con Suspense en tus proyectos? Cuéntame en los comentarios qué fallback usas y si prefieres un texto simple o un skeleton más elaborado.
