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