مجموعات المسارات (Route Groups)

في دليل app، يتم عادةً تعيين المجلدات المتداخلة إلى مسارات URL. ومع ذلك، يمكنك تحديد مجلد كـ مجموعة مسارات (Route Group) لمنع تضمين المجلد في مسار URL للرابط.

هذا يسمح لك بتنظيم مقاطع المسارات وملفات المشروع في مجموعات منطقية دون التأثير على هيكل مسار URL.

تكون مجموعات المسارات مفيدة في:

تنظيم المسارات في مجموعات مثل حسب قسم الموقع، الغرض، أو الفريق.
تمكين التخطيطات المتداخلة في نفس مستوى مقطع المسار:
- إنشاء تخطيطات متداخلة متعددة في نفس المقطع، بما في ذلك تخطيطات جذر متعددة
- إضافة تخطيط إلى مجموعة فرعية من المسارات في مقطع مشترك

الاصطلاح

يمكن إنشاء مجموعة مسارات عن طريق تضمين اسم المجلد بين قوسين: (folderName)

أمثلة

تنظيم المسارات دون التأثير على مسار URL

لتنظيم المسارات دون التأثير على URL، قم بإنشاء مجموعة لإبقاء المسارات المرتبطة معًا. سيتم حذف المجلدات بين القوسين من URL (مثل (marketing) أو (shop)).

تنظيم المسارات باستخدام مجموعات المسارات

على الرغم من أن المسارات داخل (marketing) و (shop) تشترك في نفس التسلسل الهرمي لـ URL، يمكنك إنشاء تخطيط مختلف لكل مجموعة عن طريق إضافة ملف layout.js داخل مجلداتهم.

اختيار مقاطع محددة لتطبيق تخطيط عليها

لاختيار مسارات محددة لتطبيق تخطيط عليها، قم بإنشاء مجموعة مسارات جديدة (مثل (shop)) ونقل المسارات التي تشترك في نفس التخطيط إلى المجموعة (مثل account و cart). المسارات خارج المجموعة لن تشترك في التخطيط (مثل checkout).

إنشاء تخطيطات جذر متعددة

لإنشاء عدة تخطيطات جذر، قم بإزالة ملف layout.js في المستوى الأعلى، وأضف ملف layout.js داخل كل مجموعة مسارات. هذا مفيد لتقسيم التطبيق إلى أقسام لها واجهة مستخدم أو تجربة مختلفة تمامًا. يجب إضافة العلامات <html> و <body> إلى كل تخطيط جذر.

في المثال أعلاه، كل من (marketing) و (shop) لديهم تخطيط جذر خاص بهم.

من الجيد معرفة:

تسمية مجموعات المسارات ليس لها أهمية خاصة بخلاف التنظيم. لا تؤثر على مسار URL.

المسارات التي تتضمن مجموعة مسارات يجب ألا تحل إلى نفس مسار URL مثل المسارات الأخرى. على سبيل المثال، بما أن مجموعات المسارات لا تؤثر على هيكل URL، فإن (marketing)/about/page.js و (shop)/about/page.js سيحلان إلى /about وسيسببان خطأ.

إذا كنت تستخدم عدة تخطيطات جذر بدون ملف layout.js في المستوى الأعلى، يجب تعريف ملف page.js الرئيسي في إحدى مجموعات المسارات، على سبيل المثال: app/(marketing)/page.js.

التنقل بين تخطيطات جذر متعددة سيسبب تحميل صفحة كاملة (بدلاً من التنقل على جانب العميل). على سبيل المثال، التنقل من /cart الذي يستخدم app/(shop)/layout.js إلى /blog الذي يستخدم app/(marketing)/layout.js سيسبب تحميل صفحة كاملة. هذا ينطبق فقط على تخطيطات الجذر المتعددة.