Descubre el componente Outlet de React Router: mejora tus apps móviles

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 React Router?

React Router es una biblioteca de enrutamiento para aplicaciones React que permite la navegación entre diferentes componentes sin recargar la página. Proporciona una experiencia de usuario fluida y es esencial para crear aplicaciones web de una sola página (SPA).

¿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.

Beneficios de usar el componente outlet

• Reutilización de código: Permite reutilizar componentes comunes en diferentes rutas, simplificando el código y mejorando la mantenibilidad.
• Rendimiento: Al evitar el desmontaje y montaje innecesario de componentes, mejora el rendimiento de la aplicación.
• Organización: Facilita la organización del código, separando claramente las partes estáticas y dinámicas del layout.

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

Para mostrar cómo funciona el componente outlet de React Router, utilizaremos el ejemplo de rutas anidadas. Supongamos que tenemos tres rutas con el mismo header y footer, creadas con un componente Layout que se ve 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;

En este ejemplo, todas las páginas renderizan el layout completo, lo que significa que al navegar entre las páginas, el servidor monta y desmonta todos los elementos, incluso los que no cambian.

Implementación del componente outlet

Para simplificar esto, usaremos el componente outlet de React Router para crear una sección dentro del 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.

import { Outlet } from 'react-router-dom';

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>
  );
} 

export default Layout;

Configuración de rutas anidadas

Ahora que tenemos un componente layout para todas las rutas, podemos renderizarlo dentro de la ruta padre para que todas las rutas anidadas lo incluyan. Por ejemplo, si nuestra ruta padre es /tweets, el componente Layout se pasará como valor del element de esta ruta.

import { Routes, Route } from 'react-router-dom';
import Layout from './Layout';
import TweetsPage from './TweetsPage';
import NewTweetsPage from './NewTweetsPage';

function App() {
  return (
    <Routes>
      <Route path="/tweets" element={<Layout />}>
        <Route index element={<TweetsPage />} />
        <Route path="new" element={<NewTweetsPage />} />
      </Route>
    </Routes>
  );
}

Buenas prácticas y patrones recomendados

• Evitar la duplicación de elementos: Asegúrate de no duplicar elementos comunes como el header y footer en cada componente hijo.
• Uso de Outlet en rutas anidadas: Utiliza el componente Outlet para definir áreas dinámicas en tus layouts.
• Componentes desacoplados: Mantén tus componentes desacoplados para facilitar su reutilización y mantenimiento.

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 Bootcamp de desarrollo de apps móviles, 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!