Cómo crear layouts reutilizables en React Router

Cuando una aplicación React empieza a crecer, es común que diferentes páginas compartan elementos como un header, menú de navegación, sidebar o footer. Copiar estos elementos en cada página funciona al principio, pero rápidamente genera código repetido y difícil de mantener.

Una mejor solución es utilizar layouts reutilizables con React Router. Un layout permite definir una estructura común y colocar dentro de ella diferentes páginas mediante <Outlet />.

1. Instalar React Router

Si estás comenzando un proyecto con Vite:

npm install react-router-dom

La idea será construir una estructura como esta:

src/
├── components/
│   ├── Header.jsx
│   └── Sidebar.jsx
├── layouts/
│   └── MainLayout.jsx
├── pages/
│   ├── Home.jsx
│   ├── Products.jsx
│   └── Profile.jsx
├── App.jsx
└── main.jsx

2. Crear el layout

Dentro de layouts/MainLayout.jsx podemos colocar los elementos que serán comunes para varias páginas:

import { Outlet } from "react-router-dom";
import Header from "../components/Header";

function MainLayout() {
  return (
    <>
      <Header />

      <main>
        <Outlet />
      </main>

      <footer>
        <p>Mi aplicación React</p>
      </footer>
    </>
  );
}

export default MainLayout;

La parte más importante es:

<Outlet />

Outlet funciona como un espacio reservado donde React Router renderizará la página correspondiente a la ruta actual.

3. Crear las páginas

Por ejemplo, Home.jsx:

function Home() {
  return (
    <section>
      <h1>Inicio</h1>
      <p>Bienvenido a nuestra aplicación.</p>
    </section>
  );
}

export default Home;

Y Products.jsx:

function Products() {
  return (
    <section>
      <h1>Productos</h1>
      <p>Aquí puedes consultar nuestros productos.</p>
    </section>
  );
}

export default Products;

4. Configurar las rutas

Ahora podemos utilizar el layout como una ruta padre:

import { BrowserRouter, Routes, Route } from "react-router-dom";

import MainLayout from "./layouts/MainLayout";
import Home from "./pages/Home";
import Products from "./pages/Products";
import Profile from "./pages/Profile";

function App() {
  return (
    <BrowserRouter>
      <Routes>

        <Route element={<MainLayout />}>
          <Route path="/" element={<Home />} />
          <Route path="/productos" element={<Products />} />
          <Route path="/perfil" element={<Profile />} />
        </Route>

      </Routes>
    </BrowserRouter>
  );
}

export default App;

Ahora todas estas páginas:

/
 /productos
 /perfil

utilizan automáticamente MainLayout.

Por ejemplo, cuando el usuario visita /productos, React Router renderiza:

Header
   ↓
Products
   ↓
Footer

El contenido de Products aparece exactamente donde colocamos <Outlet />.

5. Crear diferentes layouts

Una aplicación grande puede necesitar más de un layout.

Por ejemplo:

layouts/
├── MainLayout.jsx
├── DashboardLayout.jsx
└── AuthLayout.jsx

Podemos utilizar AuthLayout para páginas como:

/login
/registro
/recuperar-password

Mientras que DashboardLayout puede utilizarse para:

/dashboard
/dashboard/usuarios
/dashboard/configuracion

La configuración podría quedar así:

<Routes>

  <Route element={<AuthLayout />}>
    <Route path="/login" element={<Login />} />
    <Route path="/registro" element={<Register />} />
  </Route>

  <Route element={<MainLayout />}>
    <Route path="/" element={<Home />} />
    <Route path="/productos" element={<Products />} />
  </Route>

  <Route element={<DashboardLayout />}>
    <Route path="/dashboard" element={<Dashboard />} />
    <Route path="/dashboard/usuarios" element={<Users />} />
  </Route>

</Routes>

Esto permite que cada sección tenga su propia estructura sin duplicar componentes.

6. Layouts anidados

Una de las características más interesantes de React Router son los layouts anidados.

Por ejemplo:

<Route element={<DashboardLayout />}>

  <Route path="/dashboard" element={<Dashboard />} />

  <Route element={<AdminLayout />}>
    <Route path="/dashboard/usuarios" element={<Users />} />
    <Route path="/dashboard/configuracion" element={<Settings />} />
  </Route>

</Route>

En este caso, una página puede utilizar varios niveles de estructura:

DashboardLayout
    ↓
AdminLayout
    ↓
Users

Cada layout puede tener su propio <Outlet />.

7. ¿Por qué utilizar layouts?

Los layouts aportan varias ventajas:

Menos código repetido: header, sidebar y footer se escriben una sola vez.

Mayor organización: cada layout representa una sección concreta de la aplicación.

Mantenimiento más sencillo: si modificas el menú principal, no necesitas cambiar todas las páginas.

Escalabilidad: puedes crear layouts diferentes para usuarios, administradores, autenticación, tiendas, paneles, etc.

Mejor experiencia de desarrollo: las rutas quedan mucho más limpias y fáciles de entender.

Los layouts reutilizables son una excelente forma de estructurar aplicaciones React profesionales. La combinación de rutas anidadas + <Outlet /> permite construir estructuras flexibles donde diferentes páginas comparten componentes sin duplicar código.

Una arquitectura sencilla podría ser:

App
│
├── MainLayout
│   ├── Home
│   ├── Products
│   └── Profile
│
├── AuthLayout
│   ├── Login
│   └── Register
│
└── DashboardLayout
    ├── Dashboard
    ├── Users
    └── Settings

De esta manera, React Router no solo se encarga de cambiar de página: también permite definir la estructura y jerarquía de toda la aplicación de una forma limpia y reutilizable.