كيفية تنفيذ التوجيه المعتمد على اللغة في 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 مع التوجيه على جانب العميل ويمنع إعادة تحميل صفحة الويب، مما يتيح التنقل السلس بين الصفحات. يتضمن كل رابط معامل اللغة للحفاظ على سياق اللغة عبر التنقل.