Wie man eine Sprachumschalter-Komponente in React Router v7 erstellt

Problem

Benutzer erwarten, dass Sprachumschalter ihren aktuellen Kontext beibehalten. Wenn sie eine Produktseite, einen Hilfeartikel oder Kontoeinstellungen durchsuchen, sollte das Umschalten von Englisch auf Spanisch dieselbe Seite auf Spanisch anzeigen. Stattdessen behandeln viele Implementierungen die Sprachauswahl als Navigationsereignis, das Benutzer zur Startseite in der neuen Sprache umleitet und sie zwingt, dorthin zurückzunavigieren, wo sie waren. Dies unterbricht den Benutzerfluss und erzeugt Frustration, besonders in inhaltsreichen Anwendungen, in denen Benutzer möglicherweise tief in einer Navigationshierarchie sind.

Die Hauptursache ist, dass Sprachumschalter oft hartcodierte Ziel-URLs verwenden, anstatt URLs dynamisch basierend auf der aktuellen Seite zu erstellen. Ohne die aktuelle URL-Struktur zu lesen und zu transformieren, kann der Umschalter die Position des Benutzers in der Anwendung bei Sprachänderungen nicht beibehalten.

Lösung

Erstelle eine Sprachumschalter-Komponente, die die aktuelle URL liest und sowohl den aktiven Locale-Parameter als auch die verbleibenden Pfadsegmente extrahiert. Generiere für jede unterstützte Sprache eine neue URL, indem nur das Locale-Segment ersetzt wird, während alle anderen Pfadsegmente und Abfrageparameter intakt bleiben. Rendere diese URLs als Links, damit Benutzer die Sprache wechseln können, ohne ihren Platz in der Anwendung zu verlieren.

Dieser Ansatz behandelt die Locale als ersetzbaren Parameter in der URL-Struktur und nicht als Navigationsziel, wodurch sichergestellt wird, dass der Wechsel von /en/products/shoes zu /es/products/shoes den Kontext des Benutzers beibehält.

Schritte

1. Erstelle eine Hilfsfunktion, um Locale-bewusste URLs zu erstellen

Definiere eine Funktion, die den aktuellen Pfadnamen und eine Ziel-Locale nimmt und dann einen neuen Pfad erstellt, indem das Locale-Segment ersetzt wird.

export function buildLocalePath(
  currentPath: string,
  newLocale: string,
): string {
  const segments = currentPath.split("/").filter(Boolean);

  if (segments.length === 0) {
    return `/${newLocale}`;
  }

  segments[0] = newLocale;
  return `/${segments.join("/")}`;
}

Diese Funktion teilt den Pfadnamen in Segmente auf, ersetzt das erste Segment durch die Ziel-Locale und rekonstruiert den Pfad. Sie behandelt Randfälle wie den Root-Pfad und stellt sicher, dass die Locale immer das erste Segment ist.

2. Definieren Sie Ihre unterstützten Sprachen

Erstellen Sie ein Konfigurationsobjekt, das alle Sprachen auflistet, die Ihre Anwendung unterstützt.

export const locales = [
  { code: "en", label: "English" },
  { code: "es", label: "Español" },
  { code: "fr", label: "Français" },
  { code: "de", label: "Deutsch" },
];

Diese Konfiguration dient als Quelle der Wahrheit für die Sprachen, die im Sprachumschalter angezeigt werden sollen, und bietet benutzerfreundliche Bezeichnungen für jede Sprache.

3. Erstellen Sie die Sprachumschalter-Komponente

Erstellen Sie eine Komponente, die den aktuellen Standort liest, die aktive Sprache bestimmt und Links für alle anderen unterstützten Sprachen rendert.

import { Link, useLocation, useParams } from "react-router";
import { locales, buildLocalePath } from "./i18n-config";

export function LanguageSwitcher() {
  const location = useLocation();
  const params = useParams();
  const currentLocale = params.locale || "en";

  return (
    <nav aria-label="Language switcher">
      <ul>
        {locales.map((locale) => {
          const isActive = locale.code === currentLocale;
          const newPath = buildLocalePath(location.pathname, locale.code);

          return (
            <li key={locale.code}>
              {isActive ? (
                <span aria-current="true">{locale.label}</span>
              ) : (
                <Link to={newPath}>{locale.label}</Link>
              )}
            </li>
          );
        })}
      </ul>
    </nav>
  );
}

Die Komponente verwendet useLocation, um auf den aktuellen Pfadnamen zuzugreifen, und useParams, um die aktive Sprache aus der URL zu extrahieren. Für jede unterstützte Sprache generiert sie einen neuen Pfad mit der Hilfsfunktion und rendert entweder einen Link oder ein nicht-interaktives Element für die aktuelle Sprache.

4. Bewahren Sie Abfrageparameter und Hash-Fragmente

Erweitern Sie die Hilfsfunktion, um Abfragestrings und URL-Fragmente beim Wechsel der Sprache beizubehalten.

export function buildLocalePath(
  currentPath: string,
  search: string,
  hash: string,
  newLocale: string,
): string {
  const segments = currentPath.split("/").filter(Boolean);

  if (segments.length === 0) {
    return `/${newLocale}${search}${hash}`;
  }

  segments[0] = newLocale;
  return `/${segments.join("/")}${search}${hash}`;
}

Diese aktualisierte Version akzeptiert die search- und hash-Eigenschaften aus dem location-Objekt und fügt sie dem generierten Pfad hinzu, wodurch sichergestellt wird, dass Filter, Sortierparameter und Ankerlinks den Sprachwechsel überleben.

5. Aktualisieren der Komponente zur Verwendung des erweiterten Helpers

Modifizieren Sie den Switcher, um die vollständigen Standortinformationen an die Hilfsfunktion zu übergeben.

import { Link, useLocation, useParams } from "react-router";
import { locales, buildLocalePath } from "./i18n-config";

export function LanguageSwitcher() {
  const location = useLocation();
  const params = useParams();
  const currentLocale = params.locale || "en";

  return (
    <nav aria-label="Language switcher">
      <ul>
        {locales.map((locale) => {
          const isActive = locale.code === currentLocale;
          const newPath = buildLocalePath(
            location.pathname,
            location.search,
            location.hash,
            locale.code,
          );

          return (
            <li key={locale.code}>
              {isActive ? (
                <span aria-current="true">{locale.label}</span>
              ) : (
                <Link to={newPath}>{locale.label}</Link>
              )}
            </li>
          );
        })}
      </ul>
    </nav>
  );
}

Die Komponente übergibt jetzt location.search und location.hash an den Helper, wodurch sichergestellt wird, dass URLs wie /en/products?category=shoes#reviews zu /es/products?category=shoes#reviews werden, wenn auf Spanisch umgeschaltet wird.