Uso de Outlet y Nested Routes en React Router DOM 6

Clase 10 de 30 • Curso de React.js: Navegación con React Router

Resumen

¿Cómo funciona el componente Outlet en React Router DOM?

En el desarrollo web moderno, comprender cómo manipular rutas y navegar entre ellas es crucial para crear aplicaciones dinámicas y fluidas. React Router DOM, en su versión 6, introduce el componente Outlet, permitiendo la creación de rutas anidadas, también conocidas como Nested Routes. Este componente se convierte en una herramienta poderosa para lograr una navegación anidada eficiente y organizada.

¿Qué son las Nested Routes?

Las Nested Routes, como su nombre lo indica, son rutas anidadas dentro de otras. Imagina tener una aplicación web donde una ruta principal tiene subrutas que se exploran sin perder el contenido original de la ruta principal. Esto se asemeja al uso de Selectores Anidados en CSS, donde definimos propiedades dentro de otros selectores, permitiendo una estructura más limpia y organizada.

¿Cómo configuramos rutas anidadas con Outlet?

Para implementar rutas anidadas, debemos usar el componente Outlet. Aquí está cómo hacerlo paso a paso:

Crear Rutas Principales y Secundarias: Dentro de tu archivo app.js, establece rutas principales, como para el home, perfil o una sección del blog.
Estructura de Rutas Anidadas:
- Define una ruta principal, por ejemplo, para un blog.
- No cierres esta ruta de inmediato, sino que crea una estructura abierta donde las rutas secundarias se puedan definir dentro.

<Route path="/blog" element={<BlogPage />}>
  <Route path="post/:postId" element={<BlogPost />} />
</Route>

Uso del Componente Outlet: Inserta el componente Outlet dentro del componente principal (en este caso BlogPage) donde deseas que se rendericen las subrutas.

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

function BlogPage() {
  return (
    <div>
      <h1>Blog</h1>
      <Outlet />
    </div>
  );
}

Al hacer esto, cuando navegas a una ruta secundaria, como un post de blog específico, el contenido de esa ruta se renderiza en el lugar donde está ubicado el Outlet.

¿Cuáles son los beneficios de utilizar Outlet?

Organización: Simplifica la administración de rutas anidadas, permitiendo que se estructuren de manera lógica.
Flexibilidad: Los componentes Outlet permiten que las subrutas se integren fluidamente en el contenido de rutas madre sin necesidad de destruir y recrear componentes principales.
Mejor experiencia de usuario: Los usuarios pueden navegar entre subrutas sin perder datos ni estado de la página principal.

Ejemplos de uso de Nested Routes

Para una comprensión más sólida, considera estos ejemplos:

Blog: Una ruta blog que contiene múltiples entradas. Al seleccionar una entrada específica, se muestra detalladamente dentro del marco del blog principal.
E-commerce: Una tienda con rutas como productos y subrutas para categorías específicas o productos individuales.

Puedes comparar esta técnica con sistemas como WordPress, donde las rutas jerárquicas son comunes y efectivas.

Con el poder que ofrecen las rutas anidadas, mejorarás la estructura de tus aplicaciones y facilitarás la experiencia de navegación, ¡así que no dudes en explorar y experimentar con el componente Outlet de React Router DOM!

Andrés Esteban Rodríguez Jiménez

student•

Outlet: nested routes

Outlet es el componente que nos permite trabajar con nested routes. Nested es como se define a las cosas que están dentro de otras, por ejemplo, en CSS cuando creamos selectores y propiedades dentro de otros selectores y propiedades.

Lo mismo pasa con las nested routes, son rutas dentro de otras rutas hijas de una ruta madre.

Esto nos sirve para que React nos permita renderizar más de una ruta a la vez, teniendo una ruta dentro de otra ruta madre, y esto se puede hacer varias veces.

Para hacer estos nested routes debemos crear un componente que contenga otro, de hecho haciendo esto nos podemos evitar tener que poner toda la ruta sino que se concatenan:

// ❌
<Route path='/blog' element={<BlogPage />}>
  <Route path='/blog/:slug' element={<BlogPost />} />
</Route>

// ✔️
<Route path='/blog' element={<BlogPage />}>
  <Route path=':slug' element={<BlogPost />} />
</Route>

Aquí es cuando entra nuestro Outlet, lo debemos importar y usarlo en nuestra ruta.

Si probamos el código cambiará el hash pero no el contenido, entonces lo que debemos hacer es insertar la etiqueta Outlet dentro del componente madre ya que dentro de este se renderizará la información que tenga el componente hijo:

import { Link, Outlet } from 'react-router-dom';
...

function BlogPage() {
  return (
    <>
      <h2>Blog</h2>

			{/* Esta etiqueta es donde aparecerá renderizado el componente 
			hijo */}
      <Outlet /> // <--

      <ul>
        {blogdata.map( post => (
          <BlogLink key={post.slug} post={post} />
        ))}
      </ul>
    </>
  );
}

En este momento si usamos la aplicación veremos que tenemos el contenido deBlogPost dentro del contenido de BlogPage dependiendo de donde coloquemos la etiqueta de Outlet.

Así usamos rutas dentro de otras rutas sin perder el contenido de la ruta principal.

JOSE RANGEL

student•

Jajajaj pregunta cósmica. ¿Cómo te sale barba de una clase a otra? 😂😂

Diego Reyes Cabrera

student•

CGI como el bigote de Superman

Jorge Luis Estevez Solares

student•

Haciendo una version simple de pokedex para practicar todo lo aprendido, gracia por las clases

Ignacio Basilio

student•

Las “nested routes” son “rutas dentro de otras rutas”, algo así como rutas hijas de una ruta madre. Con esto nos podemos encargar de renderizar mas de una ruta a la vez.

Lo que vamos a hacer es embeber la ruta hija en la ruta madre:

<Route path='/blog' element={<BlogPage/>}>
  <Route path=':slug' element={<BlogPost/>}/>
</Route>

Luego, en el componente madre, vamos a importar “Outlet” para utilizarlo como un representativo de lo que quedó embebido, me recuerda mucho al uso de props.children.

import React from 'react'
import { Link, Outlet } from 'react-router-dom'
import {blogdata} from './blogdata'

function BlogPage() {
  return (
    <>
      <h2>BlogPage</h2>

      <Outlet/>
      <ul>
        {blogdata.map(post => (
            <BlogLink key={post.slug} post={post}/>
          ))}
      </ul>
    </>
  )
}

function BlogLink({ post }) {
  return (
    <li>
      <Link to={`/blog/${post.slug}`}>{post.title}</Link>
    </li>
  );
}

 

export {BlogPage}

Juan Becerra

student•

Realice un pokedex con todo lo aprendido hasta ahora: https://juan-bh.github.io/pokedex/#/ Espero les guste

JUAN JOSE HERNANDEZ MUÑOZ

student•

Felicitaciones, tremendo proyecto! Estaba revisandolo y tiene muchos detalles, se ve que le pusiste un gran empenio. Cuanto tiempo te tomo? Se te ocurrio a ti o viste algun ejemplo?

Jose Ever Muñoz Muñoz

student•

waooo que web tan bacana

Héctor Haro Hermosillo

student•

Excelente clase Juan.!!

Julian Franco

student•

En caso dado que usen el hook de useRoutes quedaria de la siguiente forma.


export const Router = () => {

  const elements = useRoutes([
    {
      path: "Home",
      element: <Home />,
    },
    {
      path: "Blog",
      element: <BlogPage />,
      children: [
        {
          path: ":slug",
          element: <BlogPost />,
        },

      ]
    },
    {
      path: "Profile",
      element: <ProfilePage />,
    },
    {
      path: "*",
      element: <p>don't exist elements</p>,
    },
    // En este caso la ruta dinámica se almacena en "slug" 
   /*  {
      path:"/blog/:slug",
      element: <BlogPost/>
    }, */

  ]);

  return elements;
};

JUAN JOSE HERNANDEZ MUÑOZ

student•

Esto se ensena durante el curso? o pertenece a otro tipo de Router de React? . y luego como implementas tu const Router?

Alarcon Ricardo Ezequiel

student•

Link a la documentación del componente Outlet: Documentación

Mariano Gastón Paduani

student•

Gracias!

Enrique Aguilera

student•

Se me ocurre utilizar esto en lugar de los portals de react

Gualberto Montiel

student•

Nested routes son rutas dentro de otras rutas, sirven por ejemplo cuando queremos dirigir contenido dentro de una ruta como si fuera su ruta hija.

SERGIO SAUL ROJAS VELASQUEZ

student•

Este es el curso que mejor he entendido de todos lo que llevo con este profesor, se nota el cambio!

Jose Tellez

student•

Basicamente, la idea de este recurso es que puedas renderizar componentes según su ruta pero sin quitar el contenido del componente o ruta madre.

Jonathan Amaya Mendieta

student•

Este componente <Outlet /> es**** el perfecto ejemplo de que con esto podemos crear un Layout que se repetira en todas las rutas que visitemos pero no vamos a llamarlo dentro de cada una de ella, solo lo generamos y con el Outlet le indicamos que este sera el contenido que cambiara, esto requiere otro tipo de "configuración" en App.jsx pero es también otra función que podemos hacer con react-router-dom

Harold Zurita Simon

student•

Outlet: nested routes

. El término nested lo utilizamos para referirnos a cuando algo está anidado. Es decir, cosas dentro de otras cosas. . Un ejemplo de su uso es en los Nested Selectors que lo vemos en CSS, donde podemos agregar selectores y propiedades de CSS dentro de otros selectores y propiedades de CSS. Esto nos permite evitar escribirlo todo, como si fuera una cascada más cascada aún en el CSS. . En este caso, Nested Routes hace referencia a rutas dentro de otras rutas, tendríamos entonces rutas hijas de una ruta madre. Por lo que podemos utilizar este componente de Outlet para que React Router DOM nos permita renderizar más de una ruta a la vez y que sepamos qué parte de la ruta va dentro de la ruta madre. . En App donde antes teníamos 2 rutas /blog y /blog/:slug vemos que esta ultima vive dentro de /blog. Entonces podemos crear una ruta dentro de la otra, donde ya no necesitaremos en la segunda tener que especificar la ruta completa, sino que solo la parte nueva que vamos a tener. .

<Route path="/blog" element={<BlogPage />}>
	<Route path=":slug" element={<BlogPost />} />
</Route>

. Al utilizar Nested Routes lo que espera React Router o bien React Router DOM 6, es que utilicemos el componente Outlet. . En caso de que no utilicemos este componente, aún si navegáramos a /blog/:slug seguiría renderizándose nuestro mismo elemento principal, es decir el de la ruta /blog. . Entonces, lo que vamos a hacer es que desde el componente renderizado por la ruta madre, vamos a importar y utilizar el componente Outlet. .

import React from 'react';
import { Link, Outlet } from 'react-router-dom';
import { blogdata } from './blogdata'

function BlogPage() {
  return (
    <>
      <h2>Blog</h2>

      <Outlet />
      
      <ul>
        {blogdata.map(post => (
          <BlogLink key={post.slug} post={post} />
        ))}
      </ul>
    </>
  );
}

...
export { BlogPage };

. Esto nos permite renderizar el componente de la ruta hija, pero manteniendo el contenido del componente renderizado de la ruta madre. En este caso, al navegar a /blog/:slug en realidad mantendremos el contenido de BlogPage, sin embargo Outlet renderizará a BlogPost entre el titulo del blog y la lista de blog post. Finalmente si nos devolvemos a /blog entonces no se mostrará el componente BlogPost. . Entonces podemos tener componentes que pueden aparecer o desaparecer sin quitar el resto del contenido dentro de la ruta madre principal en la que estábamos.

Oscar Enrique Machado Quintana

student•

Acá al usar el Outlet, el botón back no debería entonces tener el navigate(-1), ya que, como se muestran los demás blogs debajo, pues, el usuario puede navegar allí mismo y al darle back, retorna es al blog anterior y no al main blog. Es bueno usar ese navigate, si vamos a navegar a la página en si.

Brenda Sutara

student•

Hay alguna manera de poner el false para que no se visualice la ruta /blog? Me gusta lo de poner rutas anidadas y es algo que quería saber porque solo lo sabía hacer en Angular.

Pero no me gusta que vaya apareciendo el contenido anterior, hay alguna manera?