مسارات الاعتراض (Intercepting Routes)

تسمح لك مسارات الاعتراض بتحميل مسار من جزء آخر من تطبيقك داخل التخطيط الحالي. يمكن أن يكون هذا النموذج من التوجيه مفيدًا عندما تريد عرض محتوى مسار دون أن ينتقل المستخدم إلى سياق مختلف.

على سبيل المثال، عند النقر على صورة في موجز، يمكنك عرض الصورة في نافذة منبثقة، تطفو فوق الموجز. في هذه الحالة، يقوم Next.js باعتراض مسار /photo/123، وإخفاء عنوان URL، وعرضه فوق /feed.

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

الاصطلاح

يمكن تعريف مسارات الاعتراض باستخدام اصطلاح (..)، وهو مشابه لاصطلاح المسار النسبي ../ ولكن للأجزاء (segments).

يمكنك استخدام:

• (.) لمطابقة الأجزاء على نفس المستوى
• (..) لمطابقة الأجزاء مستوى واحد أعلى
• (..)(..) لمطابقة الأجزاء مستويين أعلى
• (...) لمطابقة الأجزاء من الجذر app دليل

على سبيل المثال، يمكنك اعتراض جزء photo من داخل جزء feed عن طريق إنشاء دليل (..)photo.

لاحظ أن اصطلاح (..) يعتمد على أجزاء المسار (route segments)، وليس نظام الملفات.

أمثلة

النوافذ المنبثقة (Modals)

يمكن استخدام مسارات الاعتراض مع المسارات الموازية (Parallel Routes) لإنشاء نوافذ منبثقة. هذا يسمح لك بحل التحديات الشائعة عند بناء النوافذ المنبثقة، مثل:

• جعل محتوى النافذة المنبثقة قابلاً للمشاركة عبر عنوان URL.
• الحفاظ على السياق عند تحديث الصفحة، بدلاً من إغلاق النافذة المنبثقة.
• إغلاق النافذة المنبثقة عند التنقل للخلف بدلاً من الانتقال إلى المسار السابق.
• إعادة فتح النافذة المنبثقة عند التنقل للأمام.

فكر في نمط واجهة المستخدم التالي، حيث يمكن للمستخدم فتح نافذة منبثقة للصورة من معرض باستخدام التنقل من جانب العميل، أو الانتقال إلى صفحة الصورة مباشرة من عنوان URL قابل للمشاركة:

في المثال أعلاه، يمكن لمسار جزء photo استخدام المطابق (..) لأن @modal هو فتحة (slot) وليس جزءًا. هذا يعني أن مسار photo أعلى بمستوى جزء واحد فقط، على الرغم من أنه أعلى بمستويين في نظام الملفات.

راجع وثائق المسارات الموازية (Parallel Routes) للحصول على مثال خطوة بخطوة، أو راجع مثال معرض الصور الخاص بنا.

من الجيد معرفة:

• يمكن أن تشمل الأمثلة الأخرى فتح نافذة منبثقة لتسجيل الدخول في شريط التنقل العلوي مع وجود صفحة مخصصة /login، أو فتح عربة التسوق في نافذة منبثقة جانبية.