Outlet y rutas anidadas en React Router

Cursos Empresas Blog Live Conf Precios

Contenido del curso

No sé dónde empezar

Fundamentos de navegación en la web

Introducción a React Router DOM 6

Fake authentication con React Router DOM 6

React Router en TODO Machine

Próximos pasos

Tomar examen

Outlet y rutas anidadas en React Router

Resumen

El componente Outlet de React Router Dom v6 te permite renderizar rutas dentro de otras rutas sin perder el contenido de la ruta principal. Si trabajas con React y necesitas mostrar contenido anidado, como un blog post dentro de la página de blog, esta es la herramienta que estabas buscando.

¿Qué son las nested routes en React Router Dom?

Las nested routes son rutas hijas que viven dentro de una ruta madre. El término nested aparece mucho en programación cuando hablamos de cosas dentro de otras cosas, como los nested selectors en CSS.

En React Router Dom v6, cuando metes un componente Route dentro de otro Route, le estás diciendo al router que esa ruta hija comparte el layout de la ruta padre. Eso permite que la página principal se mantenga visible mientras cambia el contenido interno según la URL.

¿Qué hace el componente Outlet? Es el espacio reservado dentro de una ruta padre donde se renderiza la ruta hija activa. Sin Outlet, la ruta padre se sigue mostrando, pero el contenido hijo no aparece en ningún lado.

¿Cómo se anidan rutas dentro de App.js?

En una estructura típica tienes rutas para home, perfil, not found y blog. Para anidar el detalle de cada blog post dentro de la página de blog, abres y cierras el componente Route del blog en lugar de auto-cerrarlo, y por dentro defines la ruta hija.

La ruta hija ya no necesita escribirse como /blog/:slug completa. Como vive dentro de /blog, basta con poner solo la parte nueva del path:

La ruta padre define el prefijo: /blog.
La ruta hija hereda ese prefijo automáticamente.
El contenido se inyecta donde coloques el Outlet.

Esa relación padre-hija es la base del sistema. Y aquí viene lo interesante: si no agregas Outlet, la navegación ocurre, pero visualmente no pasa nada.

¿Por qué la URL cambia pero no veo el contenido hijo?

Si imprimes location con useLocation, vas a ver que la URL sí cambia de /blog a /blog/que-es-react. La navegación funciona, pero el componente padre se está "comiendo" a las otras rutas porque no le indicaste dónde renderizarlas.

Ese es exactamente el problema que resuelve Outlet.

¿Dónde debo colocar el componente Outlet?

Outlet va dentro del componente de la ruta padre, no en el archivo de rutas. En el ejemplo del blog, lo importas dentro de BlogPage y lo colocas en el lugar exacto donde quieres que aparezca el contenido hijo.

El flujo es así:

Importa Outlet desde react-router-dom.
Decide la posición visual: arriba del título, en medio del listado o al final.
Inserta <Outlet /> en ese punto del JSX.

Si lo pones antes del título del blog, el blog post aparecerá encima. Si lo pones después de la lista, aparecerá debajo. Tú decides la jerarquía visual.

¿Cuándo se renderiza el contenido del Outlet? Solo cuando la URL coincide con una ruta hija. Si estás en /blog, Outlet queda vacío. Si navegas a /blog/que-es-react, ahí se inyecta el componente del post.

¿Qué casos de uso reales tiene Outlet?

La documentación oficial de React Router muestra el ejemplo de una tienda con facturas y órdenes de compra. Al entrar a /compra ves la información general, y al navegar a /compra/factura aparece la factura sin perder el resto del contenido.

Algunos escenarios donde Outlet brilla:

Dashboards con secciones que comparten sidebar y header.
Listados con vista de detalle embebida, como en WordPress.
Flujos de checkout donde cada paso vive dentro del mismo layout.
Perfiles de usuario con tabs que cambian la URL.

Es el patrón que evita duplicar layout en cada ruta y mantiene la experiencia consistente.

¿Qué viene después de dominar nested routes?

Con Outlet ya puedes insertar componentes dentro de rutas principales sin perder el contenido original. El siguiente paso natural es la fake authentication: rutas privadas, manejo de login y logout, y menús que cambian según el estado del usuario.

No se trata de un sistema de autenticación real, porque la autenticación tiene sus propios cursos por lo compleja que es. El flujo de navegación sí será el real: rutas protegidas, redirecciones tras login y control de logout, todo aplicado al proyecto de simulación de Platzi.

¿Ya estás usando nested routes en tu proyecto actual? Cuéntame en los comentarios cómo organizas tus rutas hijas.

Comentarios

Andrés Esteban Rodríguez Jiménez

Estudiante

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

Estudiante

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

Diego Reyes Cabrera

Estudiante

CGI como el bigote de Superman !Superman

Jorge Luis Estevez Solares

Estudiante

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

Ignacio Basilio

Estudiante

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

Estudiante

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

JUAN JOSE HERNANDEZ MUÑOZ

Estudiante

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

Estudiante

waooo que web tan bacana

Héctor Haro Hermosillo

Estudiante

Excelente clase Juan.!!

Julian Franco

Estudiante

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

Estudiante

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

Estudiante

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

Mariano Gastón Paduani

Estudiante

Gracias!

Enrique Aguilera

Estudiante

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

Gualberto Montiel

Estudiante

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

Estudiante

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

Jose Tellez

Estudiante

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

Estudiante

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

Estudiante

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

Estudiante

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.

Juan Diego Mejia Maestre

Estudiante

🎯 Outlet en React Router DOM: Rutas Anidadas

📌 ¿Qué es Outlet?

Outlet es un componente de React Router DOM v6 que permite crear rutas anidadas (Nested Routes). Funciona como un "espacio reservado" donde se renderizan las subrutas dentro de una ruta principal.

💡 Analogía: Piensa en Outlet como una ventana dentro de una página que cambia su contenido según la subruta activa, sin recargar toda la página.

🏗️ Configuración Básica

1️⃣ Estructura de Rutas

javascript

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

2️⃣ Implementación del Outlet

javascript

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

function BlogPage() {
  return (
    <div>
      <h1>🗂️ Blog Principal</h1>
      <nav>{/* Menú del blog */}</nav>
      
      {/* Aquí se renderizan las subrutas */}
      <Outlet />
    </div>
  );
}

✨ Ventajas Clave

BeneficioDescripción

🧩 Organización

Estructura lógica y jerárquica de rutas

🔄 Reutilización

Mantiene el layout principal mientras cambian las subrutas

⚡ Performance

No destruye/recrea componentes padre innecesariamente

👤 UX Mejorada

Navegación fluida sin pérdida de estado

🎮 Ejemplo Interactivo

Caso: Sistema de E-commerce

javascript

// app.js
<Routes>
  <Route path="/tienda" element={<TiendaLayout />}>
    <Route index element={<ProductosDestacados />} />
    <Route path="categoria/:id" element={<Categoria />} />
    <Route path="producto/:id" element={<DetalleProducto />} />
  </Route>
</Routes>

// TiendaLayout.jsx
function TiendaLayout() {
  return (
    <div>
      <header>🛒 Mi Tienda</header>
      <aside>{/* Filtros y categorías */}</aside>
      
      <main>
        <Outlet /> {/* Contenido dinámico aquí */}
      </main>
    </div>
  );
}

Resultado:

/tienda → Muestra productos destacados
/tienda/categoria/electronicos → Muestra categoría, mantiene header y aside
/tienda/producto/123 → Muestra detalle del producto, mantiene la estructura

📊 Casos de Uso Comunes

🗂️ Blog con Posts

/blog → Lista de posts
/blog/post/123 → Post específico (mantiene el sidebar del blog)

👤 Panel de Usuario

/perfil → Vista general
/perfil/configuracion → Configuración (mantiene menú lateral)
/perfil/historial → Historial de compras

🏢 Dashboard Administrativo

/admin → Panel principal
/admin/usuarios → Gestión de usuarios
/admin/reportes → Reportes (mantiene navbar de admin)

🔑 Datos Clave

Versión: React Router DOM v6+
Import: import { Outlet } from 'react-router-dom'
Ubicación: Se coloca donde quieres que aparezcan las subrutas
Index Route: Usa <Route index element={...} /> para la ruta por defecto

⚠️ Puntos Importantes

✅ El componente padre siempre se mantiene renderizado
✅ Solo el contenido del Outlet cambia entre subrutas
✅ Perfecto para layouts compartidos (headers, sidebars, footers)
❌ No usar Outlet en rutas que no tienen hijos

🎯 Conclusión

Outlet simplifica la creación de aplicaciones con navegación compleja, permitiendo estructuras jerárquicas limpias y mantenibles. Es fundamental para aplicaciones modernas con múltiples niveles de navegación.

Brenda Sutara

Estudiante

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?

Sebastian Carballo

Estudiante

English version repo (class branch):

Branch name:

feat/add-router-outlet

Commit message:

git commit -m "feat: implement React Router Outlet for nested routes

- Add Outlet component to BlogPage for nested routing

- Enable child route rendering for blog posts

- Improve component composition with nested routing structure"

David Rangel

Estudiante

Aquí está la documentación por si gustan revisarla:

Daniel Morales

Estudiante

Deberían agregar el link del tutorial que menciona el profe sobre las rutas.

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

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

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

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}

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

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

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

function BlogPage() {
  return (
    <div>
      <h1>🗂️ Blog Principal</h1>
      <nav>{/* Menú del blog */}</nav>
      
      {/* Aquí se renderizan las subrutas */}
      <Outlet />
    </div>
  );
}

// app.js
<Routes>
  <Route path="/tienda" element={<TiendaLayout />}>
    <Route index element={<ProductosDestacados />} />
    <Route path="categoria/:id" element={<Categoria />} />
    <Route path="producto/:id" element={<DetalleProducto />} />
  </Route>
</Routes>

// TiendaLayout.jsx
function TiendaLayout() {
  return (
    <div>
      <header>🛒 Mi Tienda</header>
      <aside>{/* Filtros y categorías */}</aside>
      
      <main>
        <Outlet /> {/* Contenido dinámico aquí */}
      </main>
    </div>
  );
}

Fundamentos de navegación en la web

Cuándo y por qué usar React Router

SSR vs SPA: cómo funciona cada una

Uso de React Router DOM 6 en Proyectos React

Introducción a React Router DOM 6

Instalar React Router Dom 6 paso a paso

Browser Router vs Hash Router en GitHub Pages

Primeras rutas con React Router Dom 6

Link y NavLink para navegación en React

Rutas dinámicas con React Router DOM y useParams

useNavigate para navegar con JavaScript