Implementierung von Locale-basiertem Routing in React Router v7

Problem

Beim Aufbau einer mehrsprachigen Anwendung prägt eine grundlegende Entscheidung alles andere: Wie soll die Anwendung wissen, welche Sprache angezeigt werden soll? Ohne einen expliziten Mechanismus wird die URL /about mehrdeutig – sie könnte Inhalte in jeder Sprache darstellen. Benutzer können keine Links zu spezifischen Sprachversionen teilen, und Suchmaschinen haben Schwierigkeiten zu verstehen, welche Version zu welchem Publikum gehört. Diese Mehrdeutigkeit schafft Probleme sowohl für die Benutzererfahrung als auch für die Auffindbarkeit.

Lösung

Platziere eine Sprachkennung direkt in den URL-Pfad, wie z.B. /en/about oder /fr/about. Dies macht jeden Pfad eindeutig für eine bestimmte Sprache und beseitigt die Mehrdeutigkeit sowohl für Benutzer als auch für Suchmaschinen. Durch die Definition von Routen mit einem Locale-Parameter als erstes Segment kann die Anwendung die Locale aus der URL extrahieren und verwenden, um zu bestimmen, welche Sprachinhalte angezeigt werden sollen. Dieser Ansatz stellt sicher, dass jede URL eindeutig sowohl die Seite als auch ihre Sprache identifiziert.

Schritte

1. Routen mit einem Locale-Parameter definieren

Konfiguriere deine Routen in app/routes.ts so, dass sie einen Locale-Parameter als erstes Segment jedes Pfades enthalten.

import { type RouteConfig, route, index } from "@react-router/dev/routes";

export default [
  route(":locale", "./localized-layout.tsx", [
    index("./home.tsx"),
    route("about", "./about.tsx"),
    route("contact", "./contact.tsx"),
  ]),
] satisfies RouteConfig;

Das Doppelpunkt-Präfix macht locale zu einem dynamischen Segment, das aus der URL geparst und als Parameter an Routenkomponenten übergeben wird. Diese Konfiguration erstellt Routen wie /en, /en/about, /fr/contact, wobei das erste Segment immer die Locale ist.

2. Eine Layout-Komponente erstellen, um die Locale zu extrahieren

Untergeordnete Routen werden durch die Outlet-Komponente in der übergeordneten Route gerendert. Erstelle ein Layout, das den Locale-Parameter extrahiert und verschachtelte Routen rendert.

import { Outlet, useParams } from "react-router";

export default function LocalizedLayout() {
  const { locale } = useParams();

  return (
    <div>
      <nav>
        <a href={`/${locale}`}>Home</a>
        <a href={`/${locale}/about`}>About</a>
        <a href={`/${locale}/contact`}>Contact</a>
      </nav>
      <Outlet />
    </div>
  );
}

Der useParams-Hook ruft den Wert des dynamischen Segments aus der URL ab. Das Layout verwendet diese Locale, um Navigationslinks zu erstellen, und übergibt die Renderingkontrolle über Outlet an untergeordnete Routen.

3. Zugriff auf die Locale in Seitenkomponenten

Verwenden Sie den useParams Hook in jeder Routenkomponente, um auf den Locale-Parameter zuzugreifen.

import { useParams } from "react-router";

export default function About() {
  const { locale } = useParams();

  return (
    <div>
      <h1>About Us</h1>
      <p>Current locale: {locale}</p>
    </div>
  );
}

Jede Komponente, die innerhalb des lokalisierten Layouts gerendert wird, kann die Locale aus der URL extrahieren. Dieser Wert kann dann verwendet werden, um die entsprechenden Übersetzungen zu laden, Datums- und Zahlenformate anzupassen oder andere sprachspezifische Entscheidungen zu treffen.

Ersetzen Sie Anchor-Tags durch Link-Komponenten, um die Navigation mit clientseitigem Routing zu ermöglichen.

import { Outlet, useParams, Link } from "react-router";

export default function LocalizedLayout() {
  const { locale } = useParams();

  return (
    <div>
      <nav>
        <Link to={`/${locale}`}>Home</Link>
        <Link to={`/${locale}/about`}>About</Link>
        <Link to={`/${locale}/contact`}>Contact</Link>
      </nav>
      <Outlet />
    </div>
  );
}

Die Link-Komponente übernimmt das Routing auf der Clientseite und verhindert, dass die Webseite neu geladen wird, was eine reibungslose Navigation zwischen den Seiten ermöglicht. Jeder Link enthält den Locale-Parameter, um den Sprachkontext während der Navigation beizubehalten.