روابط التنقّل (Navigation Links)

الدرس 4 من 34 · دورة TanStack Router الكاملة · 6 دقيقة و52 ثانية

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

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

الفرع: navigation-links

[00:02] هل يمكننا التنقّل بين المسارات (routes) في موجّه (router) TanStack Router؟ إذًا لنقل أننا نحتاج إلى شريط تنقّل (navigation bar) مشترك بين كل مساراتنا، نتمكّن من خلاله من التنقّل بين مسار home ومسار about. وكما نرى، هذا المسار الجذر

[00:15] مكوّن (component) مشترك بين مسارَي home وabout، إذ يمكننا وضع شريط التنقّل هنا. وبالطبع سنرى لاحقًا كيف نضيف تخطيطات (layouts) مخصّصة أخرى كذلك يمكن مشاركتها عبر مسارات متعدّدة. لكن الآن فلنستخدم

[00:27] المسار الجذر (root route). إذًا هنا، ربما بعد هذا النص وقبل مكوّن `Outlet` لدينا، فلنضيف شريط التنقّل هذا. سأضيف إذًا عنصر `div`، ولنضيف له صنفًا (class) `p-2` للحاشية (padding)، إضافةً إلى `flex`، إضافةً إلى `gap-2`. ولنضيف أيضًا

[00:45] بعض الهامش السفلي (margin bottom). وأخيرًا أيضًا لون خلفية (background color).

[00:51] وفي داخله سأضيف بضعة روابط. فبغية التنقّل في موجّه TanStack Router نستخدم مكوّن الرابط `Link` الذي يمكننا استيراده من TanStack Router. هنا يمكننا بكل بساطة وضع بعض النصوص — لنقل home — ثم هنا

[01:07] يمكننا وضع `to` لتحديد وجهة الانتقال. إذًا في هذه الحالة ننتقل إلى الشرطة المائلة (forward slash) أي مسار home (home route). ويمكننا أن نكرّر هذا، فنضيف رابطًا آخر لـ about — وهنا `/about`. وسأجعل أيضًا

[01:22] هذه الخلفية أغمق قليلًا ربما.

[01:23] كي نحصل على ما من تباين (contrast). فلنجعلها زرقاء، زرقاء داكنة، هكذا. وعلى أي حال، يمكننا الآن النقر على about للانتقال إلى about، والنقر على home للانتقال إلى home. ويمكننا أيضًا إبراز المسار النشِط حاليًا (active route)، ويمكن أن يُفعل ذلك

[01:38] بطرق متعدّدة في موجّه TanStack Router. فبدايةً يمكننا إضافة — أو في الحقيقة فلَنتفقّد العناصر هنا، وإذا نظرنا إلى الروابط التي ولّدها مكوّن الرابط `Link` هذا، سنجد أنّ الرابط النشِط حاليًا

[01:54] سيمتلك خاصية `data-status` بقيمة `active`، كما أنه سيمتلك بالفعل صنفًا (class) باسم `active`. ويمكننا الاستفادة من ذلك لأن نمنحه بعض الأنماط (styling) المختلفة. وبما أننا نستخدم Tailwind، يمكننا فعل ذلك بإضافة

[02:10] إذا كان لدينا الصنف `active` — أي المحدِّد `.active` — فحين يتوفّر ذلك يمكننا أن نضيف مثلًا `font-bold`، ويمكن فعل الشيء نفسه للرابط الآخر كذلك.

[02:24] إذًا الآن home غامق، وabout غامق، وهكذا. ويمكننا أيضًا الاستفادة من هذا: بدلًا من الصنف يمكننا الاستفادة من الخاصية `data-status` بقيمة `active` كذلك. ولدينا خيار آخر حيث يمكننا تحديد خاصية `activeProps` هنا. إذًا فضمن `activeProps`

[02:41] يمكننا إضافة `style` — عذرًا، `style` — ثم فضمن `style` يمكننا إضافة بعض الأنماط (styles) وهكذا. غير أنني سأستخدم الصنف `active` هذا. هذا رائع. غير أنّه إذا حاولنا، في مكوّن الرابط `Link` لدينا، الوصول إلى مسار (route) ما

[02:57] غير موجود، فلنحصل على أي أخطاء من TypeScript. وكما ذكرنا، إحدى الميزات الفريدة لموجّه TanStack Router هي سلامة الأنواع (type safety). لكننا لا نحصل على أي سلامة أنواع هنا. إذًا ولتحقيق سلامة الأنواع، نحتاج إلى

[03:10] أن نفعل شيئًا أوّل. إذًا هنا، بعد تعريف شجرتنا وموجّهنا وما إلى ذلك، نحتاج إلى التصريح (declare) ببعض الوحدات (modules). إذًا هنا يمكننا استخدام كلمة TypeScript المفتاحية (keyword) `declare` — عذرًا، `declare` — ثم `declare module` ثم نمدّد لحزمة TanStack. إذًا هنا ن

[03:30] نضع اسم وحدة TanStack، وهو `@tanstack/react-router`، ثم نحتاج إلى تمديد واجهة (interface) `Register` هذه. إذًا هنا نضيف `interface Register` ويجب أن نضع موجّهنا هنا، أي نوع موجّهنا. إذًا هنا نضع `router` ثم

[03:47] ثم `typeof` ثم الموجّه الذي عرّفناه هنا في هذا الثابت (constant). إذًا الآن، بما أننا عرّفنا هذه الشجرة هنا باستخدام المسار الجذر (root route) مع `addChildren`، وفي المسارات الأبناء حدّدنا الأب وهكذا، فإن TanStack Router سيعرف الآن

[04:04] بموضع مسارك الحالي في الشجرة، وسيكون قادرًا على استنتاج الأنواع (infer types) استنتاجًا صحيحًا. وبالتصريح (declare) بوحدة الموجّه (router module) هذه هنا، أو نوع الموجّه (router type) فضمن واجهة (interface) `Register` هذه، فكلما استخدمنا شيئًا مثل مكوّن الرابط

[04:18] سَنحصل على سلامة الأنواع (type safety).

[04:21] إذًا هنا، وكما ترى، نحصل بالفعل على خطأ هنا لأننا لا نملك هذا المسار. لكن إذا غيّرنا هذا إلى about مرةً أخرى فلا نحصل على أي أخطاء. وإذا أزلنا هذا وأضفنا سلسلةً نصية (string) هنا نحصل

[04:35] أيضًا على الإكمال التلقائي (autocomplete) بالنسبة إلى مساراتنا الموجودة حاليًا. وكما ترى لدينا أيضًا بعض المسارات النسبية (relative paths). سنرى ذلك لاحقًا، لكن الآن فلنُبقي هذا على about. وبالطبع، ميزات سلامة الأنواع (type safety) هذه لن

[04:50] تُطبَّق على مكوّن الرابط `Link` هذا فحسب، بل أينما فعلنا أي شيء يتعلق بالتنقّل (navigation) سَنحصل على سلامة الأنواع كذلك. وبالطبع سنرى ذلك على امتداد الفيديو. وقد كان هذا مثالًا أساسيًا على

[05:04] النهج المعتمد على الشيفرة (code-based approach) لإنشاء هذا الموجّه. أنشأنا كل شيء بالشيفرة، ولم ننشئ أي ملفات (files) لتعريف مساراتنا.

[05:13] غير أن هذه ليست الطريقة المفضّلة لإنشاء موجّهك. وكما تتخيّل، إذا كان لديك مسارات كثيرة، وتداخل (nesting) كثير، وميزات كثيرة في تطبيقك، فستضطر إلى تعريف كل مسار بنفسك،

[05:27] وتعريف المكوّن، وتحديد المسار (path)، وإضافة هذا الشيء الخاص بالمسار الأب (parent route)، وتركيب شجرتك يدويًا هنا. وبالطبع، إن فعلت كل ذلك بنفسك لمسارات كثيرة، فإنك على الأرجح ستقع في بعض الأخطاء هنا وهناك، وسيكون

[05:42] موجّهك أكثر عرضةً للأخطاء والعلل (bugs). إن استخدام النهج المعتمد على الملفات (file-based approach) الذي سنراه الآن يتيح لنا تعريف مساراتنا بإنشاء مجلدات (folders) — شجرة من المجلدات. وبفعل ذلك سيولّد TanStack Router كل

[05:56] ذلك لأجلنا. كل تلك الشيفرة المتكرّرة (boilerplate) ستُولَّد تلقائيًا. لسنا مضطرين إلى تحديد المسار الأب، ولا إلى تحديد المسار، ولا إلى بناء هذه الشجرة بأنفسنا وهكذا. ولذلك، إذا فتحت

[06:09] وثائق TanStack، فستجد هذه الإشارة يتكرّر فيها كثيرًا أن النهج المعتمد على الملفات في التوجيه (routing) هو الطريقة المفضّلة، وعلى امتداد الوثائق (documentation) سيُستخدم النهج المعتمد على الملفات في معظم

[06:23] الأمثلة. إذًا في الخطوة التالية سنرى كيف نحوّل ما أنجزناه بالنهج المعتمد على الشيفرة، لكن الآن باستخدام النهج المعتمد على الملفات، وسنظل قائمين على النهج المعتمد على الملفات على امتداد الفيديو. مع ذلك، تذكّر فقط

[06:36] أن أي شيء يمكننا فعله بالنهج المعتمد على الملفات يمكن فعله أيضًا بالنهج المعتمد على الشيفرة إن رغبت في ذلك. كما يمكنك، إن رغبت، إلقاء نظرة على هذا إذا أردت قراءة المزيد

[06:48] عن سبب كون النهج المعتمد على الملفات هو الطريقة المفضّلة. إذًا فلنحوّل الآن