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 ( react-router outlet ) 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 ( react route outlet ), 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:
// react router outlet example
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!
