كيفية الحفاظ على اللغة المحلية في روابط التنقل في React Router v7

المشكلة

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

إن ترميز بادئة اللغة في كل رابط عرضة للأخطاء ويجعل قاعدة الشفرة هشة. مع تنقل المستخدمين عبر التطبيق، يمكن أن تتغير اللغة النشطة، ويصبح تحديث مئات الروابط يدويًا أمرًا غير مستدام.

الحل

إنشاء مكون Link مخصص يقرأ تلقائيًا اللغة الحالية من عنوان URL ويضيفها كبادئة لجميع مسارات التنقل الداخلية. من خلال تغليف مكون Link من React Router، تقوم بتركيز معالجة اللغة في مكان واحد. يستخرج الغلاف معلمة اللغة من المسار الحالي ويضمن أن كل مسار وجهة يتضمنها، بحيث يحافظ التنقل على اختيار اللغة للمستخدم دون تدخل يدوي.

يحافظ هذا النهج على تعريفات الروابط نظيفة ومستقلة عن اللغة في جميع أنحاء تطبيقك مع ضمان انتقال سياق اللغة مع كل نقرة.

الخطوات

1. إنشاء مكون Link مغلف يراعي اللغة

قم ببناء مكون مخصص يستخدم useParams لاستخراج اللغة الحالية من عنوان URL ويغلف مكون Link من React Router لإضافة اللغة كبادئة لمسار الوجهة.

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

export function LocaleLink({ to, ...props }: LinkProps) {
  const { locale } = useParams<{ locale: string }>();

  const localizedTo =
    typeof to === "string"
      ? `/${locale}${to.startsWith("/") ? to : `/${to}`}`
      : {
          ...to,
          pathname: `/${locale}${to.pathname?.startsWith("/") ? to.pathname : `/${to.pathname}`}`,
        };

  return <Link to={localizedTo} {...props} />;
}

يقرأ هذا المكون معلمة اللغة من المسار الحالي ويضيفها تلقائيًا كبادئة لأي مسار تمرره إلى خاصية to، مع التعامل مع كل من أشكال السلسلة النصية والكائن.

2. استخدم مكون LocaleLink في جميع أنحاء تطبيقك

استبدل مكونات Link القياسية بـ LocaleLink حيثما تحتاج إلى تنقل يحافظ على اللغة المحلية.

import { LocaleLink } from "./LocaleLink";

export function Navigation() {
  return (
    <nav>
      <LocaleLink to="/">Home</LocaleLink>
      <LocaleLink to="/about">About</LocaleLink>
      <LocaleLink to="/products">Products</LocaleLink>
    </nav>
  );
}

عندما ينقر المستخدم على /fr/products على رابط About، سينتقل إلى /fr/about. تتم إضافة بادئة اللغة المحلية تلقائيًا دون إرباك تعريف الرابط.

3. التعامل مع الحالات الاستثنائية للمسارات المطلقة والروابط الخارجية

قم بتوسيع الغلاف للكشف عن متى يتضمن المسار بالفعل اللغة المحلية أو يشير إلى عنوان URL خارجي، مما يتجنب الإضافة المزدوجة للبادئة أو إفساد التنقل الخارجي.

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

export function LocaleLink({ to, ...props }: LinkProps) {
  const { locale } = useParams<{ locale: string }>();

  if (!locale) {
    return <Link to={to} {...props} />;
  }

  const isExternal =
    typeof to === "string" &&
    (to.startsWith("http://") || to.startsWith("https://"));
  const alreadyLocalized =
    typeof to === "string" && to.startsWith(`/${locale}/`);

  if (isExternal || alreadyLocalized) {
    return <Link to={to} {...props} />;
  }

  const localizedTo =
    typeof to === "string"
      ? `/${locale}${to.startsWith("/") ? to : `/${to}`}`
      : {
          ...to,
          pathname: `/${locale}${to.pathname?.startsWith("/") ? to.pathname : `/${to.pathname}`}`,
        };

  return <Link to={localizedTo} {...props} />;
}

هذا يحمي من الإضافة المزدوجة للبادئة إذا كان المسار يبدأ بالفعل باللغة المحلية ويمرر عناوين URL الخارجية دون تغيير، مما يضمن عمل المكون بشكل موثوق في جميع سيناريوهات التنقل.