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

المشكلة

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

الحل

ضع معرف اللغة مباشرة في مسار 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 عند عرض النسخة الفرنسية.