Componente outlet de React Router

Autor: | Última modificación: 27 de septiembre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

React Router es una herramienta que nos facilita el proceso de declarar, redirigir, anidar y reemplazar rutas cuando estamos creando la navegación de nuestras aplicaciones React. Para ello, esta librería ha desarrollado una serie de componentes y hooks que podemos usar para ejecutar diversas acciones. En este post, te enseñaremos qué es y cómo funciona el componente outlet de React Router, ideal para trabajar con rutas anidadas.

¿Qué es el componente outlet de React Router?

El componente outlet de React Router es uno de los componentes básicos de esta librería. Como puedes leer en nuestro post sobre los componentes principales de React Router, outlet nos permite establecer un slot o espacio vacío dentro de un componente, donde podemos renderizar el resultado de una ruta. Esto es muy útil cuando tenemos un layout compartido por varias rutas, pero que tiene una sección que cambia.

Entonces, por ejemplo, tenemos un componente con un header y footer que se mantendrán en varias páginas. Sin embargo, el elemento main cambia, pues debe renderizarse un elemento diferente según la ruta. En estos casos, podemos insertar el componente outlet de React Router para dejar un espacio libre en el que se renderizarán distintos componentes según la ruta.

¿Cómo funciona el componente outlet de React Router?

Para enseñarte cómo funciona el componente outlet de React Router, utilizaremos el ejemplo de rutas anidadas que desarrollamos en nuestro post sobre anidar rutas con React Router. Allí, te contamos que tenemos tres rutas con el mismo header y footer. Estas rutas estaban creadas con un componente Layout que se veía de la siguiente manera:

function Layout ( children, title ) {

return (

<div className = «layout»>

<Header className = «layout-header bordered» />

<main className = «layout-main bordered»>

<h2 className = «layout-title bordered»> {title} </h2>

<section className = «layout-content»> {children} </section>

</main>

<footer className = «layout-footer bordered»> 2022 KeepCoding </footer>

</div>

);

}

export default Layout;

Entonces, estábamos usando este componente Layout en las tres páginas, cambiando únicamente el title y el children. Sin embargo, todas las páginas estaban renderizando el layout completo. Esto quiere decir que, cuando navegábamos entre las páginas, el servidor estaba montando y desmontando todos los elementos, incluso los que no cambiaban.

Para simplificar esto, usaremos el componente outlet de React Router para crear una sección dentro de layout en la que se rendericen los componentes cambiantes. Esto hará que exista un solo layout, con una sección dinámica que varía. Dicha sección dinámica será mucho más pequeña, haciendo que los componentes <TweetsPage> y <NewTweetsPage> sean mucho más reducidos.

A continuación, te mostramos cómo se escribe el nuevo componente layout con la sección dinámica definida por el componente outlet de React Router.

En este nuevo componente ya no necesitamos las props title y children, pues no las usaremos desde las distintas rutas para modificar sus elementos. En realidad, usaremos el componente reducido en su totalidad para cambiar el main. Por ello, también podemos eliminar los elementos h2 y section.

function Layout ( ) {

return (

<div className = «layout»>

<Header className = «layout-header bordered» />

<main className = «layout-main bordered»>

<Outlet/>

</main>

<footer className = «layout-footer bordered»> 2022 KeepCoding </footer>

</div>

);

}

Ahora que tenemos un componente para todas las rutas, podemos renderizarlo dentro de la ruta padre para que todas las rutas anidadas lo tengan incluido. Para ello, pasamos {Layout/>} como valor del element de esta ruta, que en nuestro caso es /tweets. Lo que cambiará en cada ruta será lo que les pasemos como element. Este será el componente que reemplace a outlet en el momento de ejecución.

Recuerda eliminar dentro de tus componentes finales todos los elementos que ahora formen parte del layout. Puedes hacer esto simplemente eliminando el layout de cada componente. Si te olvidas de hacerlo, verás el header y footer doblemente renderizados en tu aplicación.

¿Quieres seguir aprendiendo?

Ahora que sabes cómo utilizar el componente outlet de React Router para simplificar los render de tu aplicación, estás muy cerca de dominar esta poderosa librería. Sin embargo, todavía queda mucho por aprender sobre el mundo del desarrollo web. Por ello, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva con el que te convertirás en un experto de este mundo en pocos meses. ¡Anímate a seguir aprendiendo con nosotros y matricúlate!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!