Rutas Anidadas y Lazy Loading en React con React Router Dom

Las rutas anidadas permiten organizar mejor la navegación en aplicaciones complejas, y junto con el lazy loading, optimizan el rendimiento de la app al cargar solo los componentes necesarios en cada momento. Veamos cómo implementar estas técnicas en una aplicación React.

¿Cómo crear una ruta anidada en un componente?

• Empezamos por definir una nueva página llamada dashboard en el Navbar y en el sistema de rutas, de manera similar a home y about.
• En el archivo de rutas, añadimos una nueva ruta para dashboard. Para permitir la anidación, usamos el asterisco *, lo cual indica que todas las subrutas bajo dashboard se manejarán como rutas hijas.
• Dentro de dashboard, definimos dos rutas hijas: overview y settings. Esto permite que dashboard actúe como un contenedor para las secciones específicas.

¿Cómo crear los componentes para las rutas anidadas?

1. Creamos tres componentes: Dashboard, Overview, y Settings.
2. En el componente Dashboard, añadimos enlaces de navegación hacia overview y settings utilizando el componente Link de React Router DOM.
3. Para renderizar el contenido de las rutas hijas dentro de Dashboard, incluimos el componente Outlet de React Router en Dashboard.

¿Cómo funciona el lazy loading en componentes?

Lazy loading permite cargar componentes solo cuando se necesitan, optimizando el uso de recursos en la aplicación. Para implementar lazy loading:

• Importamos Suspense de React y lo usamos para envolver el componente Settings en las rutas.
• Agregamos un fallback, que es un contenido provisional mostrado mientras el componente Settings se carga. Esto puede ser un simple mensaje de “Loading…” o un indicador visual como un shimmer.

¿Cómo se visualizan las rutas anidadas en el navegador?

Al hacer clic en Dashboard, la URL cambia y muestra el componente principal. Desde allí, podemos navegar a Overview o Settings, y la URL se actualizará dinámicamente para reflejar las rutas hijas (/dashboard/overview y /dashboard/settings). Además, al aplicar lazy loading, Settings cargará solo cuando sea solicitado, mostrando un mensaje de “Loading…” mientras tanto.