https://virgool.ir/feed/@mahshid.pouyafarfa2026-11-11 18:05:41https://files.virgool.ir/upload/users/787715/avatar/avatar.pnghttps://virgool.ir/@mahshid.pouyafarhttps://virgool.ir/@mahshid.pouyafar/روتینگ-پیشرفته-در-نکست-جی-اس-wlw2khe6frszنکست دو مدل روتینگ جالب ارائه داده تحت عنوان 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/ نمایش میدهد.باز شدن روت photo/123 بر روی روت feed/نکات مهم روتینگ Intercepting :برای تعریف Intercepting Routesاز (..) استفاده میکنیم:(.) برای دسترسی بهsegments در همان سطح(..) برای دسترسی به segments یک سطح بالاتر(..)(..) برای دسترسی به segments دو سطح بالاتر(...) برای دسترسی به segments از دایرکتوری ریشه برنامهبرای استفاده از (..) ، باید سگمنت ها را در نظر گرفته و هر آنچه سگمنت نیست مانند @folder (اسلات ها) نباید در نظر گرفته شود.همانطور که میبینید سگمنت photo را به صورت Intercept در feed تعریف کردیم:تعریف یک روت Intercepting برای سگمنت photo مثال کاربردی Intercepting وParallel :در این مثال برای نمایش مودال، از Intercepting و Parallel روتینگ به صورت همزمان استفاده شده است.این رویکرد تجربه کاربری خوبی ایجاد میکند و مزایایی دارد از جمله : بستن مودال با دکمه بازگشت ، باز کردن مجدد مودال با دکمه فوروارد، حفظ محتوای مودال و باز ماندن مودال در رفرش صفحه.نکته قابل توجه اینست که برای رسیدن به سگمنت photo از (..) (یک لول بالاتر) استفاده شده زیرا modal@ یک slot هست و نباید درنظر گرفته شود.Mahshid PouyafarMahshid PouyafarSat, 06 Jul 2024 20:06:29 +0330