React Router 7.9: Middleware sin dolor

React Router se ha convertido en el estándar de enrutamiento en el mundo de React. Pero la versión 7.9 trajo lo que muchos esperaban desde hacía años: Middleware API. Ahora puedes integrar comprobaciones de acceso, precarga de datos y otras «capas» directamente en las rutas, sin necesidad de muletas innecesarias.

¿Qué es Middleware en React Router?

Si antes era necesario construir useEffect, contextos o envolver rutas en HOC, ahora todo se resuelve de forma elegante:

• Comprobaciones de acceso (por ejemplo, rol de usuario)

• Redirecciones (si no está autorizado, a la página de inicio de sesión)

• Carga de datos antes de renderizar la página

• Registro y métricas

Middleware son funciones que se ejecutan antes de renderizar el componente, y pueden permitir la transición o cambiarla.

Ejemplo: comprobación de autorización

import { createBrowserRouter, RouterProvider } from "react-router";
import App from "./App";
import Dashboard from "./pages/Dashboard";
import Login from "./pages/Login";

const requireAuth = async ({ context, next }) => {
  if (!context.user) {
    return Response.redirect("/login");
  }
  return next();
};

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "dashboard",
        element: <Dashboard />,
        middleware: [requireAuth]
      },
      {
        path: "login",
        element: <Login />
      }
    ]
  }
]);

export default function Root() {
  return <RouterProvider router={router} />;
}
  

Ahora la protección de rutas está integrada en el propio router, no es necesario inventar la rueda.

Precarga de datos antes de renderizar

const preloadUser = async ({ next }) => {
  const user = await fetch("/api/me").then(r => r.json());
  return next({ context: { user } });
};

const router = createBrowserRouter([
  {
    path: "/profile",
    element: <Profile />,
    middleware: [preloadUser]
  }
]);
  

Ahora, en el componente Profile, los datos estarán disponibles de inmediato, sin el parpadeo de "Cargando...".

Comparación con enfoques anteriores

1. HOC (Higher-Order Components)

function withAuth(Component) {
  return function Wrapped(props) {
    const user = useUser();
    if (!user) return <Navigate to="/login" />;
    return <Component {...props} />;
  }
}
  

❌ Desventajas: duplicación de código, más difícil de gestionar los flujos de datos, la anidación de componentes aumenta.

2. useEffect + Navigate

function Dashboard() {
  const user = useUser();
  const navigate = useNavigate();

  useEffect(() => {
    if (!user) navigate("/login");
  }, [user]);

  return <div>Dashboard</div>;
}
  

❌ Desventajas: primero se monta el componente, luego viene la redirección: los usuarios ven un «parpadeo».

3. Middleware API (nuevo enfoque)

✅ Todo en la ruta, sin «parpadeo», código legible y centralizado.

¿Por qué es genial?

• Código más limpio — las rutas se convierten en un punto único para la lógica de acceso y carga.

• UX más rápido — precarga de datos antes de renderizar.

• Flexibilidad — puedes escribir tu middleware para cualquier necesidad (registro, análisis, indicadores de funciones).

¡Pero! Middleware funciona de forma asíncrona, por lo que con un gran número de comprobaciones, vale la pena pensar en el rendimiento y almacenar en caché los resultados.

React Router 7.9 hizo lo que se esperaba de él: convirtió el enrutamiento en ubicación central para la gestión de acceso y datos. Middleware API abre el camino a aplicaciones más predecibles y precisas.

En Codice hacemos que el aprendizaje de programación sea simple y comprensible: cursos de Go, JavaScript, Python y otras tecnologías, todo en una sola aplicación.

Y también tenemos un acogedor Canal de Telegram, donde debatimos las últimas noticias del mundo del desarrollo, compartimos ideas y analizamos juntos las nuevas características. Únete, ¡para aprender y crecer en TI con personas afines!