So erkennen Sie Sprachpräferenzen der Benutzer in React Router v7

Problem

Jeder Browser sendet mit jeder HTTP-Anfrage einen Accept-Language-Header, der die bevorzugten Sprachen der Benutzer in der Reihenfolge ihrer Präferenz angibt. Dieser Header enthält wertvolle Informationen darüber, welche Sprache die Benutzer erwarten, dennoch ignorieren die meisten Anwendungen ihn vollständig. Stattdessen zeigen sie allen Besuchern eine Standardsprache – typischerweise Englisch –, was die Benutzer dazu zwingt, manuell nach einem Sprachwechsler zu suchen, obwohl ihr Browser ihre Präferenz bereits kommuniziert hat. Dies erzeugt unnötige Reibung und einen schlechten ersten Eindruck, insbesondere für internationale Benutzer.

Lösung

Erstellen Sie einen Loader für den Root-Pfad, der den Accept-Language-Header aus der eingehenden Anfrage liest. Parsen Sie den Header, um die bevorzugten Sprachen der Benutzer und ihre Qualitätswerte zu extrahieren. Vergleichen Sie die bevorzugten Sprachen mit den von Ihrer Anwendung unterstützten Locales. Wenn eine Übereinstimmung gefunden wird, leiten Sie die Benutzer zum Pfad dieser Locale weiter. Wenn keine unterstützte Sprache übereinstimmt, leiten Sie zu einer Standard-Locale weiter. Dies stellt sicher, dass die Benutzer automatisch auf einer lokalisierten Version Ihrer Website landen, basierend auf Präferenzen, die sie bereits in ihrem Browser konfiguriert haben.

Schritte

1. Installieren Sie eine Bibliothek zum Parsen des Accept-Language-Headers

Der Accept-Language-Header hat ein spezifisches Format mit Qualitätswerten, das sorgfältiges Parsen erfordert. Verwenden Sie eine dedizierte Bibliothek, um dies korrekt zu handhaben.

npm install accept-language-parser

Diese Bibliothek parst den Header-String in eine geordnete Liste von Sprachpräferenzen und behandelt Qualitätswerte und Sonderfälle gemäß der HTTP-Spezifikation.

2. Definieren Sie Ihre unterstützten Locales

Erstellen Sie eine Hilfsdatei, die die von Ihrer Anwendung unterstützten Locales auflistet und einen Standard-Fallback festlegt.

export const supportedLocales = ["en", "fr", "de", "es", "ja"] as const;

export const defaultLocale = "en";

export type Locale = (typeof supportedLocales)[number];

Dies bietet eine einzige Quelle der Wahrheit dafür, welche Sprachen Ihre Anwendung bereitstellen kann, und gewährleistet Typsicherheit in Ihrer gesamten Codebasis.

3. Erstellen Sie eine Hilfsfunktion zur Locale-Erkennung

Erstellen Sie eine Funktion, die den Wert des Accept-Language-Headers entgegennimmt und die am besten passende unterstützte Locale zurückgibt.

import parser from "accept-language-parser";
import { supportedLocales, defaultLocale, type Locale } from "./locales";

export function detectLocale(acceptLanguageHeader: string | null): Locale {
  if (!acceptLanguageHeader) {
    return defaultLocale;
  }

  const languages = parser.parse(acceptLanguageHeader);

  for (const lang of languages) {
    const code = lang.code.toLowerCase();
    if (supportedLocales.includes(code as Locale)) {
      return code as Locale;
    }
  }

  return defaultLocale;
}

Diese Funktion parst den Header, iteriert durch die Sprachpräferenzen des Benutzers in der Reihenfolge ihrer Qualität und gibt die erste Übereinstimmung mit Ihren unterstützten Locales zurück oder fällt auf die Standardeinstellung zurück.

4. Konfigurieren Sie die Root-Index-Route

Fügen Sie Ihrer Routenkonfiguration eine Index-Route hinzu, die Anfragen an den Root-Pfad verarbeitet.

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

export default [
  index("routes/index.tsx"),
  route(":locale", "routes/locale-root.tsx", []),
] satisfies RouteConfig;

Die Index-Route fängt Root-Pfad-Anfragen ab, bevor eine andere Route übereinstimmt, sodass Sie die Spracherkennung durchführen und umleiten können.

5. Implementieren Sie den Index-Route-Loader mit Spracherkennung

Erstellen Sie das Index-Route-Modul, das den Accept-Language-Header liest und zum entsprechenden Locale-Pfad umleitet.

import { redirect } from "react-router";
import type { Route } from "./+types/index";
import { detectLocale } from "~/utils/detect-locale";

export async function loader({ request }: Route.LoaderArgs) {
  const acceptLanguage = request.headers.get("Accept-Language");
  const locale = detectLocale(acceptLanguage);
  return redirect(`/${locale}`);
}

Wenn ein Benutzer den Root-Pfad besucht, extrahiert dieser Loader den Accept-Language-Header aus der Anfrage, bestimmt die beste Locale und leitet ihn zum Root-Pfad dieser Locale um, wodurch sichergestellt wird, dass er Inhalte in seiner bevorzugten Sprache ab dem ersten Seitenaufruf sieht.