0Pricing
React Academy · Lección

Rutas anidadas y layouts con Outlet

Cree layouts de rutas multinivel mediante anidados y el componente .

Rutas anidadas y layouts con Outlet es una lección gratuita de React Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

¿Qué son las rutas anidadas?

Las rutas anidadas de React Router v6 permiten componer layouts: una ruta principal renderiza una estructura (navegación, barra lateral) y las rutas secundarias rellenan el área de contenido mediante <Outlet />.

Definir rutas anidadas

Coloque elementos <Route> secundarios dentro de un elemento <Route> principal en la configuración del router. La ruta principal es un prefijo para todas las rutas secundarias.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    children: [
      { path: 'dashboard', element: <Dashboard /> },
      { path: 'settings', element: <Settings /> },
    ],
  },
]);

El componente Outlet

<Outlet /> es un marcador de posición en el componente de layout principal. React Router lo sustituye por el elemento de la ruta secundaria coincidente.

function RootLayout() {
  return (
    <div>
      <nav>
        <Link to="/dashboard">Dashboard</Link>
        <Link to="/settings">Settings</Link>
      </nav>
      <main>
        <Outlet /> {/* child route renders here */}
      </main>
    </div>
  );
}

Rutas de índice

Una ruta con index: true se renderiza cuando la URL principal coincide exactamente y actúa como ruta secundaria predeterminada cuando ninguna otra ruta secundaria coincide.

{
  path: '/',
  element: <RootLayout />,
  children: [
    { index: true, element: <Home /> }, // renders at '/'
    { path: 'about', element: <About /> },
  ],
}

Anidamiento en varios niveles

Las rutas pueden anidarse en varios niveles de profundidad. Cada componente de layout de la cadena renderiza un <Outlet /> para sus propias rutas secundarias.

const router = createBrowserRouter([
  {
    path: '/app',
    element: <AppShell />,
    children: [
      {
        path: 'users',
        element: <UsersLayout />,
        children: [
          { index: true, element: <UserList /> },
          { path: ':id', element: <UserDetail /> },
        ],
      },
    ],
  },
]);

Contexto de Outlet

Pase datos desde un layout a las rutas secundarias anidadas mediante la propiedad context de <Outlet /> y léalos con useOutletContext() en las rutas secundarias.

// Parent layout
function UsersLayout() {
  const [selected, setSelected] = useState(null);
  return <Outlet context={{ selected, setSelected }} />;
}

// Child route
function UserDetail() {
  const { selected } = useOutletContext();
  return <div>{selected}</div>;
}

Layouts con nombre mediante rutas sin path

Una ruta sin path envuelve las rutas secundarias únicamente para proporcionar un layout, sin añadir un segmento a la URL. Es útil para agrupar rutas bajo un layout compartido.

{
  element: <AuthenticatedLayout />, // no path
  children: [
    { path: '/profile', element: <Profile /> },
    { path: '/billing', element: <Billing /> },
  ],
}

Enlaces relativos en rutas anidadas

Dentro de una ruta anidada, <Link to='sibling'> se resuelve de forma relativa al path de la ruta actual, igual que las URL relativas en HTML.

// Inside /app/users — link goes to /app/users/new
function UserList() {
  return <Link to="new">Add User</Link>;
}

useMatch en rutas anidadas

useMatch(pattern) devuelve datos de coincidencia cuando la URL actual coincide con el patrón, lo que resulta útil para aplicar estilos a los enlaces activos en layouts anidados.

function NavLink({ to, children }) {
  const match = useMatch(to);
  return (
    <Link to={to} className={match ? 'active' : ''}>
      {children}
    </Link>
  );
}

Límites de errores por segmento

Añada un errorElement a cualquier ruta anidada para capturar errores únicamente en ese segmento sin bloquear toda la estructura del layout.

{
  path: 'users',
  element: <UsersLayout />,
  errorElement: <UsersError />,
  children: [
    { path: ':id', element: <UserDetail /> },
  ],
}

Patrón práctico: layout de un dashboard

Un dashboard típico usa una ruta de nivel superior para la estructura de la aplicación (encabezado y barra lateral) con rutas anidadas para cada sección, de modo que la estructura permanece montada y solo cambia el área de contenido.

function DashboardShell() {
  return (
    <div className="dashboard">
      <Sidebar />
      <div className="content">
        <Outlet />
      </div>
    </div>
  );
}

Comprobación rápida

¿Qué componente debe renderizar un layout principal para mostrar su ruta secundaria coincidente?

Resumen

Las rutas anidadas permiten que las rutas principales rendericen layouts persistentes mientras las rutas secundarias rellenan el <Outlet />. Use rutas de índice para las rutas secundarias predeterminadas, rutas sin path para layouts compartidos y useOutletContext para transmitir datos.

Preguntas frecuentes

¿La lección «Rutas anidadas y layouts con Outlet» es gratis?

Sí — el texto completo de «Rutas anidadas y layouts con Outlet» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Rutas anidadas y layouts con Outlet»?

Cree layouts de rutas multinivel mediante anidados y el componente . Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Rutas anidadas y layouts con Outlet»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Rutas anidadas y layouts con Outlet
  2. Loaders y actions (API de Data Router)
  3. Rutas protegidas y guards de autenticación
  4. Gestionar el estado en los parámetros de búsqueda de la URL
← Volver a React Academy