Parámetros y Rutas Anidadas

Los parámetros de ruta resuelven un problema clásico: mostrar los detalles de un producto específico en la URL. Sin parámetros tendrías que definir /producto-1, /producto-2, /producto-3... una ruta por cada producto. Con parámetros defines /producto/:id una sola vez, y el ":id" captura el valor real de la URL. En /producto/42 la URL, useParams() devuelve { id: "42" }. La misma ruta sirve para todos los productos, usuarios, artículos, o cualquier recurso con múltiples instancias.

Las rutas anidadas con Outlet resuelven los layouts compartidos. En un dashboard el sidebar y el header siempre están visibles, pero el contenido central cambia según la página. Con Outlet defines el layout del dashboard una sola vez (incluyendo sidebar y header) y colocas <Outlet /> donde debe aparecer el contenido variable.

React Router renderiza automáticamente el componente de la ruta hija activa en ese hueco, sin que tengas que repetir el layout en cada página del dashboard.

import { Routes, Route, useParams, useNavigate, Outlet } from "react-router-dom";

// Parámetros de ruta
function DetalleProducto() {
  const { id, categoria } = useParams();
  const navigate = useNavigate();

  return (
    <div>
      <h1>Producto {id} en {categoria}</h1>
      <button onClick={() => navigate(-1)}>Volver</button>
      <button onClick={() => navigate("/productos")}>Ir a productos</button>
    </div>
  );
}

// Layout compartido con Outlet
function DashboardLayout() {
  return (
    <div className="dashboard">
      <aside>
        <Link to="/dashboard">Resumen</Link>
        <Link to="/dashboard/usuarios">Usuarios</Link>
        <Link to="/dashboard/config">Config</Link>
      </aside>
      <main>
        <Outlet /> {/* Las rutas hijas se renderizan aquí */}
      </main>
    </div>
  );
}

// Configuración de rutas con anidación
function App() {
  return (
    <Routes>
      {/* Rutas con parámetros */}
      <Route path="/productos/:id" element={<DetalleProducto />} />
      <Route path="/tienda/:categoria/producto/:id" element={<DetalleProducto />} />

      {/* Rutas anidadas con layout */}
      <Route path="/dashboard" element={<DashboardLayout />}>
        <Route index element={<DashboardResumen />} />
        <Route path="usuarios" element={<DashboardUsuarios />} />
        <Route path="config" element={<DashboardConfig />} />
      </Route>
    </Routes>
  );
}