كيفية تنفيذ التوجيه المستند إلى اللغة المحلية في React Router v7

تكوين التوجيه باستخدام أجزاء اللغة المحلية

المشكلة

عند بناء تطبيق متعدد اللغات، هناك قرار أساسي يشكل كل شيء آخر: كيف سيعرف التطبيق أي لغة يجب عرضها؟ بدون آلية واضحة، يصبح عنوان URL مثل /about غامضًا—فقد يمثل محتوى بأي لغة. لا يمكن للمستخدمين مشاركة روابط لإصدارات لغوية محددة، وتواجه محركات البحث صعوبة في فهم أي إصدار ينتمي إلى أي جمهور. تخلق هذه الغموض مشاكل لكل من تجربة المستخدم وإمكانية الاكتشاف.

الحل

ضع معرّف اللغة مباشرة في مسار URL، مثل /en/about أو /fr/about. هذا يجعل كل مسار فريدًا للغة محددة، مما يزيل الغموض لكل من المستخدمين ومحركات البحث. من خلال تحديد المسارات بمعلمة اللغة كأول جزء، يمكن للتطبيق استخراج اللغة من URL واستخدامها لتحديد محتوى اللغة الذي سيتم عرضه. يضمن هذا النهج أن كل URL يحدد بوضوح كلاً من الصفحة ولغتها.

الخطوات

1. تحديد المسارات بمعلمة اللغة

قم بتكوين المسارات في app/routes.ts لتشمل معلمة اللغة كأول جزء من كل مسار.

import { type RouteConfig, route, index } from "@react-router/dev/routes";

export default [
  route(":locale", "./localized-layout.tsx", [
    index("./home.tsx"),
    route("about", "./about.tsx"),
    route("contact", "./contact.tsx"),
  ]),
] satisfies RouteConfig;

البادئة بالنقطتين تجعل locale جزءًا ديناميكيًا سيتم تحليله من URL وتوفيره كمعلمة لمكونات المسار. يؤدي هذا التكوين إلى إنشاء مسارات مثل /en، و/en/about، و/fr/contact، حيث يكون الجزء الأول دائمًا هو اللغة.

2. إنشاء مكون تخطيط لاستخراج اللغة

يتم عرض المسارات الفرعية من خلال مكون Outlet في المسار الأصلي. قم بإنشاء تخطيط يستخرج معلمة اللغة ويعرض المسارات المتداخلة.

import { Outlet, useParams } from "react-router";

export default function LocalizedLayout() {
  const { locale } = useParams();

  return (
    <div>
      <nav>
        <a href={`/${locale}`}>Home</a>
        <a href={`/${locale}/about`}>About</a>
        <a href={`/${locale}/contact`}>Contact</a>
      </nav>
      <Outlet />
    </div>
  );
}

تسترجع واجهة useParams قيمة الجزء الديناميكي من URL. يستخدم التخطيط هذه اللغة لبناء روابط التنقل وينقل التحكم في العرض إلى المسارات الفرعية عبر Outlet.

3. الوصول إلى اللغة المحلية في مكونات الصفحة

استخدم خطاف useParams في أي مكون مسار للوصول إلى معلمة اللغة المحلية.

import { useParams } from "react-router";

export default function About() {
  const { locale } = useParams();

  return (
    <div>
      <h1>About Us</h1>
      <p>Current locale: {locale}</p>
    </div>
  );
}

يمكن لكل مكون يتم عرضه داخل التخطيط المحلي استخراج اللغة المحلية من عنوان URL. يمكن بعد ذلك استخدام هذه القيمة لتحميل الترجمات المناسبة، وتنسيق التواريخ والأرقام، أو اتخاذ أي قرارات أخرى خاصة باللغة المحلية.

استبدل علامات الارتساء بمكونات Link لتمكين التنقل باستخدام التوجيه على جانب العميل.

import { Outlet, useParams, Link } from "react-router";

export default function LocalizedLayout() {
  const { locale } = useParams();

  return (
    <div>
      <nav>
        <Link to={`/${locale}`}>Home</Link>
        <Link to={`/${locale}/about`}>About</Link>
        <Link to={`/${locale}/contact`}>Contact</Link>
      </nav>
      <Outlet />
    </div>
  );
}

يتعامل مكون Link مع التوجيه على جانب العميل ويمنع إعادة تحميل صفحة الويب، مما يتيح التنقل السلس بين الصفحات. يتضمن كل رابط معلمة اللغة المحلية للحفاظ على سياق اللغة عبر التنقل.