كيفية تعيين لغة المستند في 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>Content</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>Content</h1>
      </body>
    </html>
  );
}

تعكس سمة lang الآن اللغة الحالية، وتتحدث تلقائيًا عندما ينتقل المستخدمون بين المسارات الخاصة باللغة.