روتینگ پیشرفته در نکست جی اس

نکست دو مدل روتینگ جالب ارائه داده تحت عنوان Advanced Routing:

. Parallel Routes

با استفاده از این مدل روتینگ، می توانید به صورت همزمان دو یا چند صفحه را در یک View نمایش دهید که هر کدام میتوانند به صورت مستقل به صفحه ای جداگانه هدایت بشوند.

•مثل داشبوردها

•Intercepting Routes

این امکان به شما اجازه می‌دهد تا یک Route را از قسمت دیگری از اپلیکیشن در Layout فعلی بارگذاری کنید.

•مثل اکسپند کردن یک عکس یا ادیت یک تسک همزمان با دیدن همه تسک ها و نمایش مودال

در ادامه به توضیح بیشتر این دو مورد خواهیم پرداخت.

1- Parallel Routes :

برای تعریف روت های موازی از folder@ استفاده میکنیم که slot نام دارد (مانند team@ و analytics@ ).

اسلات ها بعنوان props به Layout پاس داده میشوند. در اینجا لازم به ذکر است که children یک اسلات ضمنی است و نیاز به وجود پوشه @children ندارد. در واقع app/page.js برابرا است با app/@children/page.js.js

•به عنوان مثال، داشبوردی دارید که بصورت همزمان صفحات team (A) و analytics (B)را نمایش میدهد، ساختار فولدر و فایل های شما به صورت زیر خواهد بود:

نکات مهم روتینگ موازی:

1- اسلات ها Route Segment نیستند و URL را تحت تاثیر نمیگذارند. مثلا برای /@analytics/views ، URL برابر است با view/ .

2- روت‌های موازی برای بخش‌هایی از اپلیکیشن که بسیار داینامیک هستند، مانند داشبوردها، مفیدند.

3- شما میتوانید یک default.js تعریف کنید تا به عنوان Fallback برای اسلات های ناموجود عمل کند.

4- این روش به شما اجازه می‌دهد تا ساختار انعطاف‌پذیری برای نمایش محتوای مختلف به صورت همزمان داشته باشید.

2- Intercepting Routes

•به عنوان مثال، وقتی روی عکسی در یک فید کلیک میکنید، عکس در یک مودال در همان صفحه نمایش داده می شود. در این حالت، نکست Route مورد نظر را روی Route کنونی نمایش می دهد. در واقع روت /photo/123 را در feed/ نمایش میدهد.

نکات مهم روتینگ Intercepting :

برای تعریف Intercepting Routesاز (..) استفاده میکنیم:

(.) برای دسترسی بهsegments در همان سطح

(..) برای دسترسی به segments یک سطح بالاتر

(..)(..) برای دسترسی به segments دو سطح بالاتر

(...) برای دسترسی به segments از دایرکتوری ریشه برنامه

برای استفاده از (..) ، باید سگمنت ها را در نظر گرفته و هر آنچه سگمنت نیست مانند @folder (اسلات ها) نباید در نظر گرفته شود.

همانطور که میبینید سگمنت photo را به صورت Intercept در feed تعریف کردیم:

مثال کاربردی Intercepting وParallel :

در این مثال برای نمایش مودال، از Intercepting و Parallel روتینگ به صورت همزمان استفاده شده است.

این رویکرد تجربه کاربری خوبی ایجاد میکند و مزایایی دارد از جمله : بستن مودال با دکمه بازگشت ، باز کردن مجدد مودال با دکمه فوروارد، حفظ محتوای مودال و باز ماندن مودال در رفرش صفحه.

نکته قابل توجه اینست که برای رسیدن به سگمنت photo از (..) (یک لول بالاتر) استفاده شده زیرا modal@ یک slot هست و نباید درنظر گرفته شود.