Layouts anidados en React Router

Los layouts anidados en React Router te permiten organizar aplicaciones grandes cuando una sección necesita una estructura distinta a la del resto. Si estás construyendo una app con React y necesitas que el flujo de reserva tenga un diseño propio sin repetir el header y el footer, este recurso es para ti.

Hasta ahora, páginas como home, buscar, favoritos, perfil y login comparten el mismo layout. Pero un flujo de reserva pide algo diferente: pasos, un resumen lateral y un diseño más enfocado. Ahí es donde entran los layouts anidados.

¿Por qué necesitas más de un layout en tu aplicación?

Un layout principal resuelve mucho, pero no todo. Las páginas públicas suelen ser distintas de las privadas, y algunas secciones tienen necesidades particulares que un solo diseño no cubre.

Cuando intentas visitar una ruta que no existe, como /booking, React Router renderiza tu comodín de "Página no encontrada" [00:34]. La solución no es forzar todo dentro de un mismo layout, sino crear estructuras separadas que convivan.

¿Qué es un layout anidado? Es un layout que se renderiza dentro de otro. El layout principal aporta elementos comunes como header y footer, y el anidado agrega una estructura específica para una sección, sin duplicar código.

Esto te da flexibilidad real: puedes tener un layout general compartido y otros separados para un dashboard, un flujo de booking o cualquier sección que lo requiera.

¿Cómo crear una página y conectarla al router?

El primer paso es crear la página. En el ejemplo se agrega un nuevo archivo llamado bookingpage.tsx que renderiza la página principal del booking [01:20].

Pero crear la página no basta. Necesitas registrarla en el router e importarla correctamente. Solo entonces, al ir directamente a /booking, la ruta responde [01:44].

Aquí aparece un detalle clave: aunque la página ya funciona, sigue mostrando el mismo header y footer, porque todavía usa el layout original [01:54].

¿Para qué sirve useParams en React Router?

Para leer valores directamente desde la URL, se importa useParams de React Router [02:12]. Este hook te permite recibir parámetros como el identificador de la propiedad que quieres renderizar.

¿Qué hace useParams? Es un hook de React Router que lee parámetros de la URL. Si tu ruta es /booking/1, useParams te entrega ese 1 para usarlo dentro del componente.

Al inicio, si visitas /booking/1, sigue apareciendo "página no encontrada" [02:44]. Eso ocurre porque falta configurar la ruta hija, algo que se resuelve con el layout anidado.

¿Cómo se construye un layout anidado con outlet?

Dentro de la carpeta layouts se crea el archivo bookinglayout.tsx [03:04]. Este layout importa el componente outlet de React Router y define su propia estructura.

Los elementos que componen este booking layout son:

• Un main con clases específicas, similar al que ya se venía usando.
• Un outlet, que permite recibir páginas renderizadas dentro de él.
• Una side o sidebar con un resumen que dice "Revisa la información antes de confirmar tu reserva".

Con esa estructura lista, falta la tarea más importante: ir al router y explicarle que el booking ya no forma parte de la ruta principal.

¿Cómo se configuran rutas hijas con children?

En el listado del router, en lugar de renderizar el booking page directamente, se renderiza el booking layout [04:00]. Después se agrega la propiedad children.

Con children te aseguras de renderizar el path del ID, que era justamente el que faltaba y provocaba el "no encontrado" al navegar [04:12]. Cuando la ruta coincide, ahí sí se renderiza el booking page.

Ambos, el layout y la página, siguen viviendo bajo el main layout porque son anidadas. Por eso no necesitas agregar manualmente ni el header ni el footer: el main layout ya los incluye [04:36].

¿Qué ves en pantalla cuando todo funciona?

Al guardar y volver al navegador, la misma URL booking/1 que antes fallaba ahora muestra tres cosas al mismo tiempo [04:56]:

• El header y el footer del layout principal.
• El flujo de reserva con el booking page.
• El resumen del lado derecho, que pertenece al booking layout.

El valor que aparece en la página se lee desde la URL. Si pasas un texto cualquiera, como "hola", la página lo mostrará directamente [05:30]. Es la prueba visible de que useParams está trayendo ese valor.

Después se agrega más contenido dentro del return, usando una etiqueta section, para que el flujo diga "Reserva tu alojamiento. Estás iniciando la reserva" junto con la propiedad recibida [06:04].

¿Cómo funciona la estructura de layouts anidados de forma gráfica?

Para verlo claro, imagina la jerarquía completa. El main layout contiene el header, el footer y un outlet, que es el componente de React Router encargado de renderizar rutas o componentes hijos [06:40].

En lugar de renderizar una página en ese outlet, se renderiza otro layout: el booking layout. Este a su vez tiene su propio content (formulario o detalles), un summary (la caja lateral derecha) y otro outlet para leer el booking page.

Así terminas con un layout, dos outlets y una página renderizándose en la ubicación correcta [07:12]. Y aquí viene lo interesante: soluciones como esta se resuelven de forma más nativa con frameworks avanzados como Next JS, pero el enfoque aquí es trabajar con el ejemplo mínimo posible usando React y React Router [07:20].

En la siguiente clase se trabajará con rutas dinámicas usando parámetros, empezando con properties/id, aprovechando la redirección que ya existe al hacer clic en las cards de propiedades [07:44].

¿Ya intentaste separar tus flujos en layouts distintos? Cuéntame en los comentarios cómo estructurarías el tuyo.