التخطيطات بلا مسار (Pathless Layouts)

الدرس 7 من 34 · دورة TanStack Router الكاملة · 5 دقيقة و53 ثانية

الفيديو الأصلي باللغة الإنجليزية. إذا تعذّر تشغيله هنا، شاهده على موقع المؤلف. التفريغ النصي العربي الكامل أدناه.

مستودع الكود لهذا الدرس

الفرع: pathless-layouts

[00:01] ماذا لو أردنا أن يكون لَدَينا مسار أب (parent route) يمكنه أن يعمل تخطيطًا (layout) مشتركًا لبعض المسارات؟ غير أنّنا لا نحتاج هذا التخطيط الأب إلى امتلاكه مسارًا. فمثلاً، في حالتنا، لَدَينا هذا الأب settings الذي يمكنه أن يعمل

[00:14] تخطيطًا لأيّ مسار يكون ابنًا له. فإذا ذهبت إلى settings/payments أو إلى settings/profile، فسَيَكُون مسار settings هذا معروضًا هنا مُصيَّرًا (rendered)، ويمكننا أن نستخدمه تخطيطًا لعرض ذلك التنقّل،

[00:26] مثلًا كما لَدَينا هنا. لكن ماذا لو أردت ذاك التخطيط لكن من دون ذاك المسار، دون أن تُضطرّ إلى الانتقال إلى settings/شيء ما؟ في TanStack Router يمكننا أيضًا أن تَكُون لَدَينا تخطيطات بلا مسار (pathless layouts). إذًا فلنقل إنّنا نحتاج إلى العودة إلى

[00:44] هذا النهج، هذا الذي فيه سَتَكُون لَدَينا تخطيط الجذر (root layout)، وسَتَكُون settings مسارًا مستقلًا بذاته، وsettings/payment مسارًا مستقلًا بذاته، وكذلك settings/profile مسارًا مستقلًا. غير أنّنا نحتاج كلّ

[00:58] هذه المسارات إلى امتلاك تخطيط مشترك من دون امتلاك مسار، صحيح؟ فنحن نحتاج إلى وجود نوعٍ من التخطيط هنا، وبعدها يمكن أن تكون لَدَينا مساراتنا، أي settings وsettings/payments وsettings/profile وما إلى ذلك. غير أنّ

[01:14] هذا الأب هنا لا نحتاج منه أن يمتلك مسارًا، بل نحتاجه فقط ليعمل تخطيطًا لعناصر واجهة مشتركة (common UI elements) كالتنقّل مثلاً. ولِنفعل ذلك، يمكننا استخدام صيغة خاصّة (special syntax) داخل مجلدنا.

[01:27] إذًا لِنذهب إلى هنا، وبدلًا من أن يكون اسم هذا المجلد settings، يمكننا إعادة تسميته. ولِنجعل هذا الأب بلا مسار، نضيف شرطة سفلية (underscore) فقط.

[01:39] ثم نضيف معرّفًا فريدًا (unique identifier) للتخطيط بلا مسار (pathless layout) الخاص بنا هذا. فِلنجعل الأمر أوضح ونسمّيه settings layout، هكذا.

[01:49] وما يتعيّن علينا فعله هو الإبقاء على هذا route.tsx كما هو، صحيح؟

[01:56] إذًا لِنُغلق هذا الملف أيضًا.

[01:59] الآن سَتكُون لَدَينا أخطاء لأنّنا لم نَعُد نملك هذه المسارات، لكنّنا سَنُصلح ذلك بعد قليل. فالآن داخل settings layout ثم route، سَيَعمل هذا تخطيطًا لنا لأيّ مسار

[02:13] سنضعه داخل هذا المجلد. فالآن، وكما تلاحظ هنا في شجرتنا، لَدَينا هذا التخطيط بوصفه أبًا، إلا أنّه لا يملك مسارًا. فباستطاعتنا الانتقال مباشرةً إلى payment.

[02:27] ويمكننا الانتقال مباشرةً إلى profile دون settings. لكن وكما تلاحظ، سَيُطابَق هذا التخطيط الأب، وسَيُعرض هنا. فلِنُوضّح الآن أنّ هذا تخطيط بلا مسار وليس أبًا

[02:43] مسارًا، هكذا. إذًا سَتَكُون لَدَينا ذلك التنقّل، وسَتَكُون لَدَينا نصّنا هنا، لكن يتعيّن علينا الآن إصلاح هذه الروابط، لأنّنا لم نَعُد نملك /settings، إنّما لَدَينا payment وprofile فقط هكذا. وهذا ينبغي أن يظلّ

[03:00] يعمل هكذا. وبالطبع، ما نزال بوسعنا أن نُبقي الـ URL على الصورة settings/شيء ما وأن نستخدم ذاك التخطيط نفسه. وكيف؟ دَعْنا في الواقع نُعِد هذا الـ URL إلى settings/شيء ما. وببساطة، داخل تخطيطنا، يمكننا أن نُنشئ

[03:16] مجلدًا باسم settings وننقل payment وprofile إلى داخل settings، هكذا.

[03:25] الآن يُفترض ألّا تكون لَدَينا أية أخطاء في مسارنا هنا في route.tsx داخل settings layout، ولن تكون لَدَينا أخطاء لأنّ لَدَينا الآن settings/payment وsettings/profile. الآن

[03:39] إذا تطلّعنا إلى شجرتنا، سَتَكُون لَدَينا هذا التخطيط الذي هو أب لـ settings/payment وsettings/profile.

[03:48] وماذا لو أردنا أن يَكُون /settings أيضًا مسارًا يستخدم التخطيط بلا مسار هذا كذلك؟ تذكّر، ولِفعل ذلك، يمكننا إنشاء ملف index داخل settings هكذا، أي index.tsx.

[04:07] والآن سَيَكُون settings مطابَقًا كذلك، وسَيَكُون ابنًا لهذا التخطيط settings layout لَدَينا هنا.

[04:16] إذًا أصبح بوسعنا الآن تحقيق هذا النهج، حيث تكون settings وsettings/payment وsettings/profile جميعها ذات تخطيط مشترك لا يملك مسارًا.

[04:31] حسنًا، رائع. لِنفعل الآن، ربّما، أمرًا أخيرًا واحدًا لهذا داخل تخطيطنا. فتذكّر أنّ تخطيطنا سَيَعيش في route.tsx داخل التخطيط. لِنصنع رابطًا يذهب إلى /settings. إذًا هنا، فلنجرب ربّما

[04:49] أن نُكرّر واحدًا من هذه ونُجعله يذهب مباشرةً إلى /settings.

[04:56] ولِنجعله يقول «الإعدادات العامة» (general settings) أو ما شابه. صحيح؟ متى توفر لنا هذا، فسَيَعمل. غير أنّه إذا ذهبنا إلى payment، فسيظلّ هذا نشطًا. صحيح؟ فذاك يحدث افتراضيًا (by default). سَيُعَدّ الرابط النشِط

[05:13] نشطًا إذا كان مطابَقًا، أي إذا كانت settings بالضبط هي المطابَقة، أو كانت settings/شيء ما مطابَقة أيضًا.

[05:22] لكن في حالتنا لا نحتاج إلى ذلك، فنحن هنا بإمكاننا تمرير exact.

[05:27] عذرًا، ليس هنا، بل في خيارات active يمكننا تمرير exact وضبطها إلى true، وهذا سيجعل هذا الرابط نشطًا حصرًا حين تكون settings هي المطابَقة بالضبط، لا settings/شيء ما. فبهذا سَيُصلَح الأمر.

[05:46] وبالمناسبة، يمكننا ضبط هذا الخيار لرابطٍ بعينه، كما يمكننا كذلك ضبطه عالميًا (globally) حين نُعرِّف موجّهنا. أحيانًا في مجلدك، قد