كيفية تنفيذ التوجيه المستند إلى اللغة في TanStack Start v1

المشكلة

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

الحل

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

الخطوات

1. إنشاء مسار تخطيط للغة

حدد معلمة لغة اختيارية باستخدام صيغة {-$locale} لإنشاء أنماط توجيه مرنة حيث تكون معلمة اللغة اختيارية. يستخدم TanStack Start التوجيه القائم على الملفات حيث يتم تحديد المسارات في دليل src/routes.

import { createFileRoute, Outlet } from "@tanstack/react-router";

export const Route = createFileRoute("/{-$locale}")({
  component: LocaleLayout,
});

function LocaleLayout() {
  return <Outlet />;
}

يتطابق هذا المسار مع كل من /about (اللغة غير محددة) و /en/about (اللغة هي "en")، مما يتيح لك دعم عناوين URL مع أو بدون بادئة اللغة.

2. إنشاء مسارات فرعية تحت تخطيط اللغة

يستخدم TanStack Router التوجيه المتداخل لمطابقة عنوان URL مع شجرة المكونات الصحيحة للعرض. قم بإنشاء ملفات المسارات كعناصر فرعية لمعلمة اللغة لوراثة اللغة من عنوان URL.

import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/{-$locale}/about")({
  component: AboutPage,
});

function AboutPage() {
  const { locale } = Route.useParams();
  const currentLocale = locale || "en";

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

بنية ملف المسار {-$locale}/about.tsx تنشئ مسارات مثل /about و /en/about التي تعرض كلاهما نفس المكون مع إمكانية الوصول إلى معلمة اللغة.

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

استخدم خطاف useParams لقراءة اللغة من عنوان URL وتحديد اللغة التي سيتم عرضها.

import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/{-$locale}/products")({
  component: ProductsPage,
});

function ProductsPage() {
  const { locale } = Route.useParams();
  const displayLocale = locale || "en";

  return (
    <div>
      <h1>{displayLocale === "fr" ? "Produits" : "Products"}</h1>
    </div>
  );
}

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

4. إنشاء روابط تحافظ على اللغة

استخدم مكون Link مع معلمة اللغة للتنقل بين الصفحات مع الحفاظ على اللغة الحالية.

import { Link, createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/{-$locale}/")({
  component: HomePage,
});

function HomePage() {
  const { locale } = Route.useParams();

  return (
    <nav>
      <Link to="/{-$locale}/about" params={{ locale }}>
        About
      </Link>
      <Link to="/{-$locale}/products" params={{ locale }}>
        Products
      </Link>
    </nav>
  );
}

من خلال تمرير اللغة الحالية في خاصية params، تقوم الروابط تلقائيًا بإنشاء عناوين URL تتطابق مع سياق لغة المستخدم الحالية، مثل /fr/about عند عرض النسخة الفرنسية.