Ein Leitfaden für Einsteiger zu Middleware in React Router

Einführung

Wenn Sie jemals vor jeder geschützten Route die Authentifizierung überprüfen, Anfragen in Ihrer gesamten Anwendung protokollieren oder Daten zwischen übergeordneten und untergeordneten Routen in React Router teilen mussten, haben Sie wahrscheinlich denselben Code mehrfach geschrieben. React Router Middleware löst dieses Wiederholungsproblem, indem Sie Anfragen abfangen und verarbeiten können, bevor sie Ihre Loader und Actions erreichen.

Dieser Leitfaden behandelt alles, was Sie zur Implementierung von React Router Middleware in Version 7.9+ benötigen – vom Aktivieren des v8_middleware-Flags bis zur Erstellung Ihrer ersten Authentifizierungs-Middleware mit der neuen Middleware-API.

Was ist React Router Middleware?

React Router 7 Middleware ist eine Funktion, die Code vor und nach der Ausführung Ihrer Route-Handler ausführt. Stellen Sie es sich als Verarbeitungspipeline vor, in der jede Middleware Anfragen überprüfen, Daten zum Context hinzufügen oder sogar die Anfrage mit einer Weiterleitung kurzschließen kann.

Im Gegensatz zur parallelen Ausführung von Loadern in React Router 6 wird Middleware sequenziell in einer verschachtelten Kette ausgeführt. Übergeordnete Middleware wird vor untergeordneter Middleware auf dem Weg nach unten ausgeführt, dann in umgekehrter Reihenfolge auf dem Weg nach oben nach der Generierung einer Response.

Parent middleware → Child middleware → Route handler → Child middleware → Parent middleware

Diese sequenzielle Ausführung ermöglicht Muster, die zuvor unmöglich waren, wie z. B. die Freigabe authentifizierter Benutzerdaten von einer übergeordneten Route an alle untergeordneten Routen ohne redundante Datenbankaufrufe.

Aktivieren von Middleware in Ihrem Projekt

Um Middleware zu verwenden, stellen Sie zunächst sicher, dass Sie React Router 7.9.0 oder höher ausführen (oder 7.3.0+ mit aktiviertem Middleware-Flag). Aktivieren Sie dann das Feature-Flag in Ihrer Konfiguration:

// react-router.config.ts
import type { Config } from "@react-router/dev/config";

export default {
  future: {
    v8_middleware: true,
  },
} satisfies Config;

Dieses Flag aktiviert die stabile Middleware-Unterstützung und die neue Context-API. Der context-Parameter in Ihren Loadern und Actions bietet nun Zugriff auf von Middleware gesetzte Daten über eine typsichere API.

Die Context-API verstehen

Die neue Context-API in React Router 7 bietet eine typsichere Map-ähnliche Schnittstelle zur Datenfreigabe zwischen Middleware und Route-Handlern. Anstatt Eigenschaften direkt an ein Context-Objekt anzuhängen, verwenden Sie nun context.set() und context.get() mit typisierten Context-Schlüsseln:

import { createContext } from "react-router";

// Erstellen Sie einen typisierten Context-Schlüssel
const userContext = createContext<User>();

// In Middleware
context.set(userContext, user);

// In Loader/Action
const user = context.get(userContext); // Typsicheres User-Objekt

Dieser Ansatz eliminiert TypeScript-Typ-Assertions und verhindert Namenskonflikte zwischen verschiedenen Middlewares.

Erstellen Ihrer ersten Middleware

Lassen Sie uns eine Authentifizierungs-Middleware erstellen, die Routen schützt und Benutzerdaten teilt:

// app/middleware/auth.ts
import { redirect, createContext } from "react-router";
import type { Route } from "./+types/root";

export const userContext = createContext<User | null>();

export const authMiddleware: Route.Middleware = async ({ 
  request, 
  context,
  next
}) => {
  const user = await getUserFromSession(request);
  
  if (!user) {
    throw redirect("/login");
  }
  
  context.set(userContext, user);
  return next();
};

Wenden Sie diese Middleware auf geschützte Routen an:

// app/routes/dashboard.tsx
import { authMiddleware, userContext } from "~/middleware/auth";

export  const  middleware: Route.MiddlewareFunction[] = [authMiddleware];

export async function loader({ context }: Route.LoaderArgs) {
  const user = context.get(userContext); // Garantiert vorhanden
  const profile = await getProfile(user.id);
  return { profile };
}

Die Middleware wird vor dem Loader ausgeführt und gewährleistet authentifizierten Zugriff sowie die Bereitstellung des User-Objekts ohne zusätzliche Datenbankabfragen.

Server-Middleware vs. Client-Middleware

React Router unterstützt sowohl Server- als auch Client-Middleware mit leicht unterschiedlichem Verhalten:

Server-Middleware wird auf dem Server ausgeführt und muss eine Response zurückgeben:

export const middleware: Route.MiddlewareFunction[] = [
  async ({ request }, next) => {
    console.log(`Server: ${request.method} ${request.url}`);
    const response = await next();
    response.headers.set("X-Custom-Header", "value");
    return response; // Erforderlich
  };
];

Client-Middleware wird im Browser während der clientseitigen Navigation ausgeführt:

export const middleware: Route.ClientMiddlewareFunction[] = [
  async ({ next }) => {
    const start = performance.now();
    await next();
    console.log(`Navigation dauerte ${performance.now() - start}ms`);
  },
];

Gängige Middleware-Muster

Logging-Middleware

export const loggingMiddleware: Route.Middleware = async ({ request, next }) => {
  const requestId = crypto.randomUUID();
  console.log(`[${requestId}] ${request.method} ${request.url}`);
  
  const response = await next();
  
  console.log(`[${requestId}] Response ${response.status}`);
  return response;
};

Zusammensetzen mehrerer Middlewares

Sie können mehrere Middleware-Funktionen miteinander verketten:

// app/routes/admin.tsx
export const middleware = [
  loggingMiddleware,
  authMiddleware,
  adminRoleMiddleware
];

Jede Middleware wird der Reihe nach ausgeführt, und jede kann die Kette kurzschließen, indem sie eine Weiterleitung oder Fehlerantwort auslöst.

Fazit

React Router Middleware transformiert die Art und Weise, wie Sie Querschnittsanliegen in Ihrer Anwendung handhaben. Durch Aktivierung des v8_middleware-Flags und die Übernahme der neuen Context-API können Sie Code-Duplikation eliminieren, Daten effizient zwischen Routen teilen und Authentifizierung, Protokollierung und andere Muster auf saubere, wiederverwendbare Weise implementieren.

Beginnen Sie mit einfacher Middleware wie Authentifizierung oder Protokollierung und erkunden Sie dann fortgeschrittene Muster, während Ihre Anwendung wächst. Das sequenzielle Ausführungsmodell und die typsichere Context-API machen Middleware zu einer leistungsstarken Ergänzung Ihres React Router Toolkits.

Häufig gestellte Fragen

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.