Implementierung von Locale-basiertem Routing in React Router v7

Problem

Beim Erstellen einer mehrsprachigen Anwendung prägt eine grundlegende Entscheidung alles andere: Wie erfährt die Anwendung, 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 bestimmten Sprachversionen teilen, und Suchmaschinen haben Schwierigkeiten zu verstehen, welche Version zu welcher Zielgruppe gehört. Diese Mehrdeutigkeit schafft Probleme sowohl für die Benutzererfahrung als auch für die Auffindbarkeit.

Lösung

Fügen Sie eine Sprachkennung direkt in den URL-Pfad ein, z. B. /en/about oder /fr/about. Dadurch wird jeder Pfad eindeutig einer bestimmten Sprache zugeordnet, wodurch die Mehrdeutigkeit sowohl für Benutzer als auch für Suchmaschinen beseitigt wird. Durch die Definition von Routen mit einem Locale-Parameter als erstem 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 sowohl die Seite als auch ihre Sprache eindeutig identifiziert.

Schritte

1. Routen mit einem Locale-Parameter definieren

Konfigurieren Sie Ihre Routen in app/routes.ts, um einen Locale-Parameter als erstes Segment jedes Pfads einzuschließen.

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. Erstellen Sie 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 Rendering-Kontrolle ü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 locale-spezifische 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 verarbeitet das Routing auf der Clientseite und verhindert das Neuladen der Webseite, wodurch eine reibungslose Navigation zwischen Seiten ermöglicht wird. Jeder Link enthält den Locale-Parameter, um den Sprachkontext über die Navigation hinweg beizubehalten.