مسارات الاعتراض (Intercepting Routes)
تسمح لك مسارات الاعتراض بتحميل مسار من جزء آخر من تطبيقك داخل التخطيط الحالي. يمكن أن يكون هذا النموذج من التوجيه مفيدًا عندما تريد عرض محتوى مسار دون أن ينتقل المستخدم إلى سياق مختلف.
على سبيل المثال، عند النقر على صورة في موجز، يمكنك عرض الصورة في نافذة منبثقة، تطفو فوق الموجز. في هذه الحالة، يعترض Next.js مسار /photo/123، ويخفي عنوان URL، ويعرضه فوق /feed.
ومع ذلك، عند الانتقال إلى الصورة عن طريق النقر على رابط قابل للمشاركة أو عن طريق تحديث الصفحة، يجب أن يتم عرض صفحة الصورة بالكامل بدلاً من النافذة المنبثقة. لا ينبغي أن يحدث أي اعتراض للمسار.
الاصطلاح
يمكن تعريف مسارات الاعتراض باستخدام اصطلاح (..)، والذي يشبه اصطلاح المسار النسبي ../ ولكن للأجزاء.
يمكنك استخدام:
(.)لمطابقة الأجزاء على نفس المستوى(..)لمطابقة الأجزاء مستوى واحد أعلى(..)(..)لمطابقة الأجزاء مستويين أعلى(...)لمطابقة الأجزاء من الدليل الجذرapp
على سبيل المثال، يمكنك اعتراض جزء photo من داخل جزء feed عن طريق إنشاء دليل (..)photo.
لاحظ أن اصطلاح
(..)يعتمد على أجزاء المسار، وليس نظام الملفات.
أمثلة
النوافذ المنبثقة
يمكن استخدام مسارات الاعتراض مع المسارات الموازية لإنشاء نوافذ منبثقة. يتيح لك ذلك حل التحديات الشائعة عند بناء النوافذ المنبثقة، مثل:
- جعل محتوى النافذة المنبثقة قابلاً للمشاركة عبر URL.
- الحفاظ على السياق عند تحديث الصفحة، بدلاً من إغلاق النافذة المنبثقة.
- إغلاق النافذة المنبثقة عند التنقل للخلف بدلاً من الانتقال إلى المسار السابق.
- إعادة فتح النافذة المنبثقة عند التنقل للأمام.
فكر في نمط واجهة المستخدم التالي، حيث يمكن للمستخدم فتح نافذة منبثقة للصورة من معرض باستخدام التنقل من جانب العميل، أو الانتقال إلى صفحة الصورة مباشرة من عنوان URL قابل للمشاركة:
في المثال أعلاه، يمكن لمسار جزء photo استخدام المطابق (..) نظرًا لأن @modal هو فتحة وليس جزءًا. هذا يعني أن مسار photo أعلى بمستوى جزء واحد فقط، على الرغم من أنه أعلى بمستويين في نظام الملفات.
راجع وثائق المسارات الموازية للحصول على مثال خطوة بخطوة، أو راجع مثال معرض الصور.
جيد أن تعرف:
- يمكن أن تشمل الأمثلة الأخرى فتح نافذة منبثقة لتسجيل الدخول في شريط تنقل علوي مع وجود صفحة مخصصة
/login، أو فتح عربة تسوق في نافذة منبثقة جانبية.