Как задать язык документа в React Router v7

Укажите язык страницы для браузеров и экранных читалок

Проблема

Веб-страницы должны указывать основной язык для браузеров и вспомогательных технологий. Без явного указания языка программы чтения с экрана используют язык системы пользователя по умолчанию, что может приводить к неправильному произношению, если язык контента отличается. Браузеры не могут предложить точные функции перевода, так как им приходится угадывать исходный язык. Поисковые системы испытывают трудности с правильной индексацией страниц для нужной языковой аудитории, что снижает их обнаруживаемость для пользователей, ищущих на этом языке.

Решение

Установите атрибут lang в корневом элементе <html>, чтобы указать основной язык документа. Этот атрибут принимает допустимый код языка, который сообщает браузерам, программам чтения с экрана и поисковым системам, на каком языке написан контент. Когда язык указывается явно, вспомогательные технологии могут применять правильные правила произношения, браузеры могут предлагать подходящие варианты перевода, а поисковые системы могут индексировать страницу для нужной языковой аудитории.

Шаги

1. Определите текущую локаль

Корневой маршрут в app/root.tsx отвечает за рендеринг корневого HTML-документа. Если ваше приложение использует маршрутизацию на основе локали (например, шаблоны /: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>Контент</h1>
      </body>
    </html>
  );
}

Этот код считывает локаль из URL, если она указана, и использует английский язык по умолчанию, если параметр локали отсутствует.

2. Сопоставьте коды локалей с языковыми тегами

Если ваше приложение использует пользовательские идентификаторы локалей, отличающиеся от стандартных языковых тегов, создайте функцию сопоставления для их преобразования в допустимые языковые коды BCP 47.

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

Это гарантирует, что атрибут lang получает допустимый языковой тег, даже если ваша маршрутизация использует упрощенные коды локалей.

3. Примените языковой тег к HTML-элементу

Используйте сопоставленный языковой тег в качестве значения для атрибута lang в элементе <html> вашего корневого компонента.

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>Содержимое</h1>
      </body>
    </html>
  );
}

Атрибут lang теперь отражает текущую локаль, автоматически обновляясь, когда пользователи переходят между маршрутами, специфичными для языка.