كيفية تعيين لغة المستند في 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 الآن تعكس اللغة الحالية، وتتحدث تلقائيًا عندما ينتقل المستخدمون بين المسارات المخصصة للغات المختلفة.