Comment définir la langue du document dans React Router v7

Déclarer la langue de la page pour les navigateurs et les lecteurs d'écran

Problème

Les pages web doivent déclarer leur langue principale aux navigateurs et aux technologies d'assistance. Sans déclaration explicite de la langue, les lecteurs d'écran utilisent par défaut la langue du système de l'utilisateur, ce qui peut produire une prononciation incorrecte lorsque la langue du contenu diffère. Les navigateurs ne peuvent pas proposer de fonctionnalités de traduction précises car ils doivent deviner la langue source. Les moteurs de recherche ont du mal à indexer les pages avec confiance pour le bon public linguistique, réduisant ainsi la découvrabilité pour les utilisateurs effectuant des recherches dans cette langue.

Solution

Définissez l'attribut lang sur l'élément racine <html> pour déclarer la langue principale du document. Cet attribut accepte un code de langue valide qui indique aux navigateurs, aux lecteurs d'écran et aux moteurs de recherche quelle langue utilise le contenu. Lorsque la langue est déclarée explicitement, les technologies d'assistance peuvent appliquer les règles de prononciation correctes, les navigateurs peuvent proposer des options de traduction appropriées et les moteurs de recherche peuvent indexer la page pour le bon public linguistique.

Étapes

1. Déterminer la locale actuelle

La route racine dans app/root.tsx est responsable du rendu du document HTML racine. Si votre application utilise un routage basé sur les locales (comme les modèles /:locale/...), extrayez la locale des paramètres de route. Sinon, utilisez une locale par défaut.

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>
  );
}

Cela lit la locale depuis l'URL si elle est présente et utilise l'anglais par défaut lorsqu'aucun paramètre de locale n'existe.

2. Mapper les codes de locale aux balises de langue

Si votre application utilise des identifiants de locale personnalisés qui diffèrent des balises de langue standard, créez une fonction de mappage pour les convertir en codes de langue BCP 47 valides.

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";
}

Cela garantit que l'attribut lang reçoit une balise de langue valide même lorsque votre routage utilise des codes de locale simplifiés.

3. Appliquer la balise de langue à l'élément HTML

Utilisez la balise de langue mappée comme valeur pour l'attribut lang sur l'élément <html> dans votre composant racine.

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>
  );
}

L'attribut lang reflète désormais la locale actuelle, se mettant à jour automatiquement lorsque les utilisateurs naviguent entre les routes spécifiques à chaque langue.