المسارات المسطّحة (Flat Routes)

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

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

مستودع شيفرة هذا الدرس

الفرع: flat-routes

[00:01] إمكانية تداخل المسارات من خلال إنشاء المجلدات ووضع المسارات داخل المجلدات وما إلى ذلك، يمكننا أيضًا أن نجعل مجلد المسارات هذا مسطحًا تمامًا من دون أي تداخل في المجلدات، وذلك باتباع طريقة معينة في تسمية ملفاتنا عندما

[00:16] نُنشئ مساراتنا. إذًا، ما سأفعله هو أنني سأعيد بناء كل ما قمنا به بخصوص هذه المسارات المتداخلة من جديد بالكامل، لكن من دون أي تداخل، ومن دون أن أضع أي مجلد داخل آخر.

[00:28] سيكون مجلد المسارات لدينا مسطحًا تمامًا. إذًا، ما سأفعله هو أنني ربما سأنشئ مجلدًا مؤقتًا (temp) داخل مجلد المصدر (source) لدينا وأنقل إليه الأشياء المتداخلة لدينا. فلننقل المجلد settings_ إلى هنا

[00:43] وننقل أيضًا مجلد _settingsLayout إلى داخل هذا المجلد المؤقت كذلك. وبذلك لن يبقى لدينا أي تداخل داخل مجلد المسارات، ولنحاول الآن إعادة إنشاء هذه المجلدات لكن من دون أن نضع أي مجلد داخل آخر. ولتحقيق ذلك نستخدم

[00:57] النقطة (dot) لتداخل التخطيطات (layouts) والمسارات.

[01:00] إذًا هنا مثلًا نحتاج إلى تعريف التخطيط (layout) الخاص بنا، وهو تخطيط الإعدادات. فما يمكننا فعله هو أن نُنشئ هنا ملفًا اسمه _settingsLayout. ولاحظ أن هذا ملف وليس مجلدًا، لذا لا نحتاج إلى إنشاء ملف route.tsx

[01:15] داخله؛ بل سيكون هذا كل ما لدينا.

[01:18] وسيكون هذا هو التخطيط لدينا. يمكننا ببساطة نسخ الأشياء التي كانت لدينا سابقًا في route.tsx، وربما نكتفي بنسخ عنصر div هذا ووضعه هنا بدلًا منه.

[01:30] إذًا، كان لدينا هذا، فلنستورد Outlet، وكان لدينا هذا المكوّن (component) nav الذي كان معرّفًا في مجلد components هذا. لننقل هذا المجلد components الآن في الواقع إلى داخل مجلد المسارات (routes) لدينا على هذا النحو، بما أننا لن نحتفظ بعد الآن بمجلد _settingsLayout

[01:45] والآن يمكننا ببساطة استيراد nav من هذا المجلد على هذا النحو.

[01:54] وبالتالي أصبح لدينا هنا تخطيط الإعدادات (settings layout) على هيئة ملف من دون أي مجلد ومن دون أي ملف route.tsx. فالآن ماذا لو أردنا إنشاء مسار يكون ابنًا لهذا التخطيط؟ ما دام ليس لدينا مجلد، فما يمكننا فعله هو استخدام

[02:11] النقطة. يمكننا إنشاء ملف جديد على هذا النحو. وتذكّر أننا كان لدينا، داخل هذا التخطيط، مسار الإعدادات (settings route) الخاص بنا، وكان لدينا أيضًا settings/profile وsettings/payment. فكيف يمكننا تحقيق ذلك الآن من دون أي مجلدات؟ يمكننا

[02:26] إنشاء ملف يبدأ بـ _settingsLayout ثم النقطة ثم settings.index وبصيغة tsx بالطبع، لإنشاء مسار فهرس الإعدادات (settings index route). وتذكّر أن كان لدينا مجلد _settingsLayout ثم

[02:42] مجلد settings ثم index، ولتحويل ذلك إلى مسار مسطّح نكتفي بإنشاء ملف اسمه _settingsLayout.settings.index. والآن يمكننا الانتقال إلى ملف index القديم هذا

[02:54] أو في الحقيقة لم نفعل شيئًا هنا، فلنتركه على هذا النحو إذن. والآن إذا حفظنا هذا فسنتمكن من زيارة /settings. وإذا ألقينا نظرة على شجرتنا فسنجد settingsLayout ولدينا settings كابن له.

[03:10] لننفّذ الآن settings/payment و settings/profile وسيكون ذلك متطابقًا تمامًا في الأسلوب لكن بدلًا من index سيكون لدينا نقطةٌ ثم شيء آخر. فلنفعل ذلك بسرعة، سأنسخ هذا

[03:25] الاسم من هنا وأُنشئ داخل routes ملفًا جديدًا وألصق المحتوى. وبدلًا من index سنجعل profile.

[03:33] ولننشئ واحدة أخرى لـ payment.

[03:39] والآن كما ترى لدينا settingsLayout ولدينا كأبنائه settings/payment و settings/profile و settings/index.

[03:48] وبذلك ينتهي الأمر فيما يخصّ مجلد _settingsLayout، إذ نقلنا كل شيء إلى ملفات مسطّحة هنا. لكن يبدو أن شيئًا لا يعمل؛ فمن المفترض أن يكون لدينا شريط التنقّل (navigation) هنا كي نتنقّل بين صفحات الإعدادات المختلفة. أعتقد

[04:03] أننا ربما نحتاج فقط إلى إعادة تشغيل الخادم (server) أو ما شابه.

[04:07] فلنحاول ذلك. ما زال لا يعمل. آه، في الواقع، عذرًا؛ لدي خطأ مطبعي (typo) هنا: يجب أن يكون settings وليس setting.

[04:18] وبذلك نعم، سيعمل هذا الآن.

[04:21] والآن كل شيء يعمل كما كان من قبل.

[04:24] لكن الآن ليس لدينا أي تداخل داخل مجلد المسارات؛ فكل شيء مسطّح. أخيرًا، تذكّر أننا كان لدينا مجلد settings_ ثم كان لدينا password. ولكي لا يستخدم password تخطيط الإعدادات، يمكننا

[04:39] الفعل ذلك أيضًا بصورة مسطّحة، بمجرد إنشاء ملف اسمه settings_ ثم النقطة ثم password.tsx.

[04:54] بهذه الطريقة. وإذا ألقينا نظرة على أدوات المطوّر (dev tools) فسنحصل على settings/password، لكنه ليس ابنًا لتخطيط الإعدادات. وإذا زرنا هذا المسار فلن نجد شريط التنقّل وما شابه ذلك. وهكذا صار

[05:06] كل ما قمنا به، يمكننا الآن حذف هذا المجلد المؤقت، وكل ما أنجزناه باستخدام المجلد يمكن إنجازه بهذه الطريقة المسطّحة أيضًا. ويمكننا كذلك استخدام الطريقتين

[05:19] معًا؛ فيمكن أن يكون لدينا مجلد ونستخدم داخلَه هذه الصيغة بالنقطة أيضًا. وبالطبع فالأمر متروك لتفضيلك: فربما لا مانع لديك من بعض التداخل، لكن ربما لا تريد التعمق أكثر من اللازم في تداخل المجلدات. لذا يمكنك

[05:33] أن تنشئ بعض المجلدات ربما، لكن يمكنك كذلك استخدام هذا الترميز بالنقطة. وبالمناسبة، لاحظتُ للتوّ أن الشرطة السفلية (underscore) بعد settings هنا في حالتنا لن يكون لها أي أثر، لأن settings ليست الأبَ (parent). إذًا

[05:48] الآن حتى لو حذفنا هذه الشرطة السفلية فعلًا — عذرًا، أعني إعادة تسميته وحذف هذه الشرطة السفلية — فلن يتغيّر أي شيء، لأن settings ليست أبًا على أي حال.

[05:59] تذكّر أننا لا نستخدم settings كتخطيط؛ فـ settings هنا مسار مستقل خاص بها، وله index. لذا لن يحدث أي فرق. وما زال بوسعنا زيارة settings/password وسيظل بدوره

[06:11] ليس ابنًا لهذا التخطيط بالطبع، بما أن اسم المجلد لا يشمل settings layout. لكننا سنحتاج هذه الشرطة السفلية لو كان settings أبًا. فإذا غيّرنا اسم هذا index — بمعنى حذفنا كلمة index

[06:27] من اسمه — ثم نأتي إلى هنا ونعرض داخلَه ربما عنصر Outlet فقط، ليصبح settings أبًا لأي ابن، على هذا النحو. ولنفترض أيضًا أن settings/password كان يستخدم هذا التخطيط settings كذلك. فلنعد تسمية

[06:46] هذا على النحو التالي: _settingsLayout.settings.password، وهكذا دواليك.

[06:53] والآن كما ترى، لدينا settings layout ولدينا settings كأبٍ ولديه password و payment و profile وما إلى ذلك. وإذا احتجنا في هذه الحالة أن لا يستخدم password الإعدادات كتخطيط، فالآن، في هذه الحالة، ستكون

[07:09] الشرطة السفلية مفيدة. فنقوم هنا بإعادة تسمية هذا — عذرًا — بإعادة تسميته هنا ووضع الشرطة السفلية على هذا النحو.

[07:21] والآن كما ترى، أصبح settings أبًا فقط لـ payment و profile.

[07:27] غير أن settings/password ليس ابنًا لـ settings.

[07:32] وكل ما أحتاج إليه هو توضيح ذلك لتجنّب أي التباس.