React Router 7.9: Middleware ohne Schmerzen

React Router ist längst zum Standard für das Routing in der React-Welt geworden. Aber die Version 7.9 brachte das, worauf viele seit Jahren gewartet hatten - Middleware API. Jetzt können Sie Zugriffsprüfungen, Daten-Preloading und andere „Ebenen“ direkt in Routen einbetten, ohne unnötige Krücken.

Was ist Middleware in React Router?

Wenn es früher notwendig war, useEffect, Kontexte oder Wrap-Routen in HOC zu bauen, wird jetzt alles elegant gelöst:

• Zugriffsprüfungen (z. B. Benutzerrolle)

• Weiterleitungen (falls nicht autorisiert - zur Anmeldeseite)

• Laden von Daten vor dem Rendern der Seite

• Protokollierung und Metriken

Middleware sind Funktionen, die ausgeführt werden vor dem Rendern der Komponente, und können entweder den Übergang zulassen oder ihn ändern.

Beispiel: Berechtigungsprüfung

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

Jetzt ist der Routenschutz in den Router selbst integriert — es ist nicht nötig, Fahrräder zu sperren.

Daten vor dem Rendern vorladen

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

Jetzt sind die Daten in der Komponente Profile sofort verfügbar, ohne dass die "Lade..."-Anzeige blinkt.

Vergleich mit früheren Ansätzen

1. HOC (Higher-Order Components)

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

❌ Nachteile: Code-Duplizierung, schwierigere Verwaltung von Datenflüssen, zunehmende Verschachtelung von Komponenten.

2. useEffect + Navigate

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

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

  return <div>Dashboard</div>;
}
  

❌ Nachteile: Zuerst wird die Komponente montiert, dann kommt die Umleitung — Benutzer sehen ein „Blinken“.

3. Middleware-API (neuer Ansatz)

✅ Alles in der Route, ohne "Blinken", lesbarer und zentralisierter Code.

Warum ist das cool?

• Sauberer Code – Routen werden zu einem einzigen Punkt für die Zugriffs- und Download-Logik.

• Schnelleres UX — Vorladen von Daten vor dem Rendern.

• Flexibilität — Sie können Ihre Middleware für jeden Bedarf schreiben (Protokollierung, Analyse, Feature-Flags).

Aber! Middleware arbeitet asynchron, daher lohnt es sich bei einer großen Anzahl von Überprüfungen, über die Leistung nachzudenken und die Ergebnisse zwischenzuspeichern.

React Router 7.9 hat das getan, was von ihm erwartet wurde: Es hat das Routing in zentrale Zugriffs- und DatenverwaltungMiddleware-API ebnet den Weg für vorhersehbarere und präzisere Anwendungen.

In Kodike Wir machen das Erlernen von Programmiersprachen einfach und verständlich: Kurse in Go, JavaScript, Python und anderen Technologien – alles in einer App.

Und wir haben auch gemütlich Telegram-Kanal, wo wir die neuesten Nachrichten aus der Welt der Entwicklung diskutieren, Erkenntnisse teilen und neue Funktionen gemeinsam analysieren. Mach mit, um mit Gleichgesinnten in der IT zu lernen und zu wachsen!