Wie man Sprachpräferenzen der Benutzer in React Router v7 erkennt

Problem

Jeder Browser sendet mit jeder HTTP-Anfrage einen Accept-Language-Header, der die bevorzugten Sprachen des Benutzers in der Reihenfolge der Präferenz angibt. Dieser Header enthält wertvolle Informationen darüber, in welcher Sprache der Benutzer Inhalte sehen möchte, dennoch ignorieren die meisten Anwendungen ihn vollständig. Stattdessen zeigen sie jedem Besucher eine Standardsprache – typischerweise Englisch – an und zwingen die Benutzer, manuell nach einem Sprachumschalter zu suchen, obwohl ihr Browser bereits ihre Präferenz mitgeteilt hat. Dies erzeugt unnötige Reibung und einen schlechten ersten Eindruck, besonders für internationale Benutzer.

Lösung

Erstellen Sie einen Loader für den Root-Pfad, der den Accept-Language-Header aus der eingehenden Anfrage ausliest. Analysieren Sie den Header, um die bevorzugten Sprachen des Benutzers und ihre Qualitätswerte zu extrahieren. Vergleichen Sie die bevorzugten Sprachen mit den unterstützten Locales Ihrer Anwendung. Wenn eine Übereinstimmung gefunden wird, leiten Sie den Benutzer zum Pfad dieser Locale weiter. Wenn keine unterstützte Sprache übereinstimmt, leiten Sie zu einer Standard-Locale weiter. Dies stellt sicher, dass 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 eine sorgfältige Analyse erfordert. Verwenden Sie eine dedizierte Bibliothek, um dies korrekt zu handhaben.

npm install accept-language-parser

Diese Bibliothek analysiert 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 Locales auflistet, die Ihre Anwendung unterstützt, und geben Sie einen Standard-Fallback an.

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 für die Sprachen, die Ihre Anwendung bereitstellen kann, und gewährleistet Typsicherheit in Ihrem gesamten Codebase.

3. Erstellen Sie einen Hilfsprogramm zur Erkennung der Sprache

Erstellen Sie eine Funktion, die den Accept-Language-Header-Wert nimmt und die am besten passende unterstützte Sprache 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 analysiert den Header, durchläuft die Sprachpräferenzen des Benutzers in der Reihenfolge der Qualität und gibt die erste Übereinstimmung mit Ihren unterstützten Sprachen zurück oder fällt auf die Standardsprache zurück.

4. Konfigurieren Sie die Root-Index-Route

Fügen Sie eine Index-Route zu Ihrer Routenkonfiguration 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 Anfragen an den Root-Pfad ab, bevor andere Routen übereinstimmen, sodass Sie die Spracherkennung und Weiterleitung durchführen können.

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

Erstellen Sie das Index-Route-Modul, das den Accept-Language-Header liest und zur entsprechenden Sprachpfad weiterleitet.

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 Sprache und leitet den Benutzer zum Root-Pfad dieser Sprache weiter, wodurch sichergestellt wird, dass er Inhalte in seiner bevorzugten Sprache bereits beim ersten Seitenaufruf sieht.