Wie man die Dokumentsprache in React Router v7 festlegt

Seitensprache für Browser und Screenreader deklarieren

Problem

Webseiten müssen ihre Hauptsprache für Browser und assistive Technologien deklarieren. Ohne eine explizite Sprachdeklaration verwenden Screenreader standardmäßig die Systemsprache des Benutzers, was zu falscher Aussprache führen kann, wenn die Inhaltssprache abweicht. Browser können keine präzisen Übersetzungsfunktionen anbieten, da sie die Ausgangssprache erraten müssen. Suchmaschinen haben Schwierigkeiten, Seiten zuverlässig für das richtige Sprachpublikum zu indexieren, was die Auffindbarkeit für Benutzer, die in dieser Sprache suchen, verringert.

Lösung

Setzen Sie das lang-Attribut im Root-<html>-Element, um die Hauptsprache des Dokuments zu deklarieren. Dieses Attribut akzeptiert einen gültigen Sprachcode, der Browsern, Screenreadern und Suchmaschinen mitteilt, welche Sprache der Inhalt verwendet. Wenn die Sprache explizit deklariert wird, können assistive Technologien korrekte Ausspracheregeln anwenden, Browser können passende Übersetzungsoptionen anbieten und Suchmaschinen können die Seite für das richtige Sprachpublikum indexieren.

Schritte

1. Aktuelle Locale bestimmen

Die Root-Route in app/root.tsx ist für das Rendern des Root-HTML-Dokuments verantwortlich. Wenn Ihre Anwendung Locale-basiertes Routing verwendet (wie /:locale/...-Muster), extrahieren Sie die Locale aus den Routenparametern. Andernfalls verwenden Sie eine Standard-Locale.

import { useParams } from "react-router";

export default function Root() {
  const params = useParams();
  const locale = params.locale || "en";

  return (
    <html lang={locale}>
      <head>
        <meta charSet="utf-8" />
      </head>
      <body>
        <h1>Content</h1>
      </body>
    </html>
  );
}

Dies liest die Locale aus der URL, falls vorhanden, und fällt auf Englisch zurück, wenn kein Locale-Parameter existiert.

2. Locale-Codes zu Sprach-Tags zuordnen

Wenn Ihre Anwendung benutzerdefinierte Locale-Kennungen verwendet, die von Standard-Sprach-Tags abweichen, erstellen Sie eine Mapping-Funktion, um sie in gültige BCP 47-Sprachcodes zu konvertieren.

function getLanguageTag(locale: string): string {
  const languageMap: Record<string, string> = {
    en: "en",
    "en-US": "en-US",
    es: "es",
    fr: "fr",
    de: "de",
    ja: "ja",
    "zh-CN": "zh-Hans",
    "zh-TW": "zh-Hant",
  };

  return languageMap[locale] || "en";
}

Dies stellt sicher, dass das lang-Attribut einen gültigen Sprach-Tag erhält, auch wenn Ihr Routing vereinfachte Locale-Codes verwendet.

3. Wenden Sie das Sprach-Tag auf das HTML-Element an

Verwenden Sie das zugeordnete Sprach-Tag als Wert für das lang-Attribut im <html>-Element in Ihrer Root-Komponente.

import { useParams } from "react-router";

function getLanguageTag(locale: string): string {
  const languageMap: Record<string, string> = {
    en: "en",
    es: "es",
    fr: "fr",
    de: "de",
  };
  return languageMap[locale] || "en";
}

export default function Root() {
  const params = useParams();
  const locale = params.locale || "en";
  const lang = getLanguageTag(locale);

  return (
    <html lang={lang}>
      <head>
        <meta charSet="utf-8" />
      </head>
      <body>
        <h1>Content</h1>
      </body>
    </html>
  );
}

Das lang-Attribut spiegelt nun die aktuelle Locale wider und aktualisiert sich automatisch, wenn Benutzer zwischen sprachspezifischen Routen navigieren.