رهگیری مسیرها
رهگیری مسیرها به شما امکان می دهد مسیری را از قسمت دیگری از برنامه خود در چیدمان فعلی بارگذاری کنید. این الگوی مسیریابی زمانی مفید است که می خواهید محتوای یک مسیر را بدون اینکه کاربر به یک زمینه متفاوت سوئیچ کند، نمایش دهید.
به عنوان مثال، هنگام کلیک کردن روی یک عکس در فید، می توانید عکس را در یک مودال نمایش دهید، روی فید قرار دهید. در این حالت، Next.js مسیر /photo/123 را قطع می کند، URL را مخفی می کند و آن را روی /feed قرار می دهد.
با این حال، هنگام پیمایش به عکس با کلیک کردن روی یک URL قابل اشتراک گذاری یا با تازه کردن صفحه، کل صفحه عکس به جای حالت modal نمایش داده می شود. هیچ رهگیری مسیری نباید رخ دهد.
قرارداد
رهگیری مسیرها را می توان با قرارداد (..) تعریف کرد که شبیه به قرارداد مسیر نسبی ../ اما برای بخش ها است.
شما می توانید از موارد زیر استفاده کنید:
(.)برای مطابقت با بخش های هم سطح(..)برای مطابقت با بخش های یک سطح بالاتر(..)(..)برای مطابقت با بخش های دو سطح بالاتر(...)برای مطابقت با بخش ها از فهرست ریشهapp
برای مثال، می توانید بخش photo را از درون بخش feed با ایجاد یک فهرست (..)photo قطع کنید.
توجه داشته باشید که قرارداد
(..)بر اساس بخشهای مسیر است، نه سیستم فایل.
مثال ها
مودال ها
رهگیری مسیرها را می توان همراه با مسیرهای موازی برای ایجاد مودالها استفاده کرد. این به شما امکان می دهد چالش های رایج هنگام ساخت مودال را حل کنید، مانند:
- ایجاد محتوای قابل اشتراک گذاری از طریق URL برای مودال.
- حفظ زمینه (Preserving context) هنگام تازه سازی صفحه، به جای بستن مودال.
- بستن مودال در پیمایش به عقب به جای رفتن به مسیر قبلی.
- بازگشایی مودال در پیمایش به جلو.
الگوی UI زیر را در نظر بگیرید، جایی که کاربر می تواند با استفاده از پیمایش سمت کاربر یک مودال عکس را از یک گالری باز کند یا مستقیماً از یک URL قابل اشتراک گذاری به صفحه عکس حرکت کند.
در مثال بالا، مسیر به بخش photo می تواند از تطبیق دهنده (..) استفاده کند زیرا @modal یک اسلات است و نه یک بخش. این بدان معناست که مسیر photo فقط یک سطح بالاتر از بخش است، با وجود اینکه دو سطح بالاتر از سیستم فایل است.
برای یک مثال مرحله به مرحله به مستندات مسیرهای موازی مراجعه کنید یا نمونه گالری تصاویر (opens in a new tab) ما را ببینید.
خوب است بدانید:
- سایر نمونه ها می توانند شامل باز کردن یک مودال ورود در نوار ناوبری بالا در حالی که یک صفحه اختصاصی
/loginنیز وجود دارد، یا باز کردن سبد خرید در یک مودال جانبی باشد.