Layout principal con Outlet en React Router

Si tu aplicación de React tiene un header y un footer que se repiten en cada página, un layout principal con Outlet es la solución para dejar de copiar y pegar componentes manualmente. Aquí aprenderás a centralizar la estructura compartida usando React Router, ideal para quienes construyen aplicaciones que necesitan escalar sin ensuciar el código.

Por qué necesitas un layout compartido en tu aplicación

Cuando Platzi House empezó a crecer, apareció un problema clásico: algunas páginas tenían header y otras no. La homepage, la de buscar y favoritos lo mostraban porque se los agregamos manualmente. Pero perfil y login quedaron sin él, justamente por eso, porque solo se lo pusimos a dos páginas.

Y aquí viene lo interesante: agregar un footer sencillo dejó todo aún más inconsistente. Si cambias de una página a otra y olvidas incluir un elemento, se rompe la coherencia visual.

Este enfoque manual aumenta el tiempo de mantenimiento de cada página [00:38]. Imagina tener veinte secciones y tener que ir archivo por archivo agregando el mismo import. No es escalable ni limpio.

¿Qué es un layout en React Router? Es una estructura compartida que envuelve tus páginas para renderizar elementos comunes como header y footer una sola vez, sin repetirlos en cada archivo.

Cómo crear el main layout con el componente Outlet

La solución empieza creando una carpeta dentro de src llamada layouts, en plural, porque puedes tener varios. Uno principal, otro para páginas privadas detrás de login, o uno para un dashboard.

En este caso creamos un solo archivo: main layout.tsx. Lo primero que importa es el componente Outlet, que entrega React Router [02:00].

El layout queda así de simple:

• Importa el header y el footer.
• Los renderiza dentro de un div con className app.
• Coloca Outlet en medio para inyectar la página que corresponda.

El footer es una etiqueta footer de HTML con un párrafo de texto adentro. Nada complicado, solo lo necesario para que el ejercicio tenga sentido.

¿Para qué sirve el componente Outlet? Es un marcador de posición donde React Router renderiza la página hija según la ruta activa, mientras mantiene fijos los elementos del layout alrededor.

Cómo configurar las rutas con children e index true

Ahora viene el cambio más importante: decirle al archivo de rutas que renderice primero el main layout y dentro cada página. En el archivo router importamos React Router de primero y el main layout de segundo, dejando las páginas debajo.

Antes, la ruta con slash renderizaba directamente la homepage. La estructura cambia porque ahora el elemento principal debe ser el main layout [04:15].

Para que el layout reciba las demás páginas, agregamos un parámetro llamado children. El editor incluso sugiere mover todas las páginas secundarias dentro de ese children.

La nueva estructura queda con esta lógica:

1. El path sigue siendo el slash.
2. El element a renderizar es el main layout, no la homepage.
3. El children contiene todas las demás páginas.

Hay un detalle clave. A la página por defecto no le pasas un path con slash, sino index: true [05:26]. Esto le indica de forma explícita que es la página a renderizar cuando la aplicación cargue.

Además, dentro de cada path ya no necesitas el slash, porque el path inicial lo concatena automáticamente. Así queda search, favorites, profile y login. No olvides importar el comodín, el asterisco *, que renderiza cuando ninguna ruta hace match [05:55].

¿Qué hace index true en las rutas? Marca cuál página hija se muestra por defecto en la ruta padre, sin necesidad de asignarle un path propio.

Cómo eliminar los imports duplicados de header y footer

Al guardar y abrir el navegador aparece un error intencionado: el header y el footer se renderizan dos veces [06:15]. ¿Por qué? Porque la homepage y favoritos todavía los tenían agregados manualmente.

Perfil y login, que antes no mostraban nada, ahora sí despliegan header y footer correctamente. La duplicación solo ocurre donde ya existían los imports manuales.

La limpieza es sencilla. En la homepage:

• Eliminas el header.
• Quitas el div de la app.
• Te quedas solo con el main.
• Borras el footer y ambos imports.

En favoritos y en search haces lo mismo: eliminas el header, el fragment (ya no lo necesitas porque queda un solo elemento) y sus imports [07:50].

Después de limpiar cada archivo, guarda y vuelve al navegador. Ahora Platzi House muestra un solo header y un solo footer en todas las páginas: homepage, buscar, favoritos, perfil y login, todas funcionando desde el layout principal.

El resultado es claro: ya no repites el import de tu header ni de tu footer en cada página. Lo agregas una vez como hijo en el layout principal y él se encarga de repetirlo en cada ruta.

En la siguiente clase daremos un paso más con layouts anidados para separar secciones públicas, privadas y flujos especiales como la reserva. ¿Te animas a crear tu primer layout y contarnos cómo te fue en los comentarios?