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