الموجّه المبني على الكود (Code Based Router)

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

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

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

الفرع: code-based-init

[00:01] في موجّه TanStack Router، لكي نُنشئ موجّهًا يلزمنا أن نُركِّب شجرة (tree) تكون لَدَينا فيها عقدة جذر (root node). إذًا ستكون لَدَينا مسارَ جذر (root route)، وهذا سَيَكُون جذر شجرتنا، وسَيَظلَّ موجودًا دائمًا، وليس له مسار (path)

[00:16] وهو أيضًا مطابَق دائمًا (always matched)، ويعني ذلك أنّ المكوّن (component) الذي سنعرفه في هذه العقدة الجذر سَيَظلَّ موجودًا دائمًا.

[00:22] لكن الآن، بوصفهم أبناءً (children) لهذه العقدة الجذر، يمكننا إنشاء مساراتنا. إذًا يمكن أن يكون لَدَينا بضعة مسارات. فلنقل مثلًا أنّ لَدَينا مسار home، ولنقل أنّ لَدَينا أيضًا مسار ‏/about، وبالطبع يمكن أن يستمرّ هذا الأمر، فمن الممكن أن يكون لَدَينا

[00:39] أبناء آخرين لـ about وما إلى ذلك.

[00:43] إذًا لكي نُنشئ موجّه TanStack Router، يلزمنا أن نُنشئ هذه الشجرة بطريقة ما، ويمكن فعل ذلك ببضع طرائق.

[00:50] أولًا الأسلوب المبني على الكود (code-based)، وثانيًا الأسلوب المبني على الملفات (file-based).

[00:54] فلنجرّب أولًا الأسلوب المبني على الكود، ثم سنجد أنّه ربّما ليس الطريقة المثالية لإنشاء موجّهنا، وسننتقل بعده إلى الأسلوب المبني على الملفات. لكن فلنرَ أولًا كيف يمكننا إنشاء موجّهٍ مبنيٍّ على الكود. إذًا هنا

[01:09] في تطبيقنا نمتلك هذا الملف main.tsx، وهنا نقوم بتصيير (render) هذا المكوّن app الذي يمكننا إيجاده هنا، وهو يعرض هذه الشعارات (logos) وهذا المكوّن counter وما إلى ذلك. غير أنّنا، بالطبع، لن نستخدم ذلك.

[01:22] بل سنصيّر بدلًا من ذلك موجّهًا جديدًا. فلنحذف هذا، ولنحذف app، ولنُنشئ موجّهنا ونضعه هنا بدلًا منه. إذًا أولًا، وكما ذكرنا، سَيَكُون لَدَينا مسارُ الجذر هذا. فكيف يمكننا

[01:37] إنشاءه؟ يمكننا أن نُنشئ ثابتًا (constant) جديدًا. لِنسمّه rootRoute. ثم يمكننا استدعاء دالة (function) تُسمّى createRootRoute، وهي مُستوردة من TanStack React Router. وهنا نُركِّب مكوّنًا

[01:53] سَيُصيَّر. وكما ذكرنا، هذا المكوّن سَيَظلَّ موجودًا لكلّ المسارات، وسَيَكُون أبًا (parent) لكلّ المسارات. إذًا هنا، داخل هذا الكائن (object)، يمكننا تمرير مكوّن، وهو سَيَكُون مجرّد دالة تُرجِع

[02:07] ‏JSX. إذًا هنا، ربّما، سأضع وسم div في الوقت الحالي. وهذا div له لون خلفية (background color)، وفيه بعض النصّ root route أيضًا. والآن فلنحفظ هذا، ولنُنشئ أبناءنا. إذًا نحتاج إلى إنشاء مسار home ومسار ‏/about.

[02:24] ولِفعل ذلك بالأسلوب المبني على الكود، نُنشئ، بالمثل أيضًا، ثابتًا جديدًا. لِنسمّه indexRoute أو homeRoute. وفي هذه الحالة نستدعي دالة createRoute. إذًا createRoute.

[02:40] ثم نمرّر له بعض الخيارات (options) كذلك. أولًا، علينا أن نتأكّد من الإشارة إلى أنّ هذا المسار indexRoute هو ابن (child) لمسار الجذر لَدَينا. إذًا، لِفعل ذلك، نستخدم خيارًا هنا، وهو getParentRoute.

[02:53] وهذا سَيَكُون دالة تُرجِع المسارَ الأب (parent route)، وهو rootRoute. علينا فعل ذلك لكلّ مساراتنا كي نضمن الحصول على مزايا أمان الأنواع (type safety) التي سَنراها لاحقًا. ثم نحدّد

[03:07] قيمة المسار (path) التي سَتُطابَق لهذا المسار، وهي الشرطة المائلة للأمام (forward slash). هذا هو مسار home لَدَينا. ثم نحدّد بالطبع مكوّنًا أيضًا سَيُصيَّر عندما نزُر هذا المسار.

[03:18] إذًا بالطبع يمكننا إنشاء هذه المكوّنات في ملفات منفصلة ثم استيرادها (import) هنا. غير أنّه بما أنّ هذا مجرّد مثال، سأضع المكوّن هنا في الملف نفسه، ومكوّن بسيط جدًا يعرض

[03:30] ‏div بلون خلفية، وفيه نصّ home كذلك. وبالمثل سأُنشئ مسار about أيضًا، وهو سَيَكُون تمامًا على النحو نفسه.

[03:39] إذًا سأضع هذا هنا: aboutRoute. نحدّد الأب، والمسار ‏/about، ومكوّنًا آخر فيه بعض النصّ الذي يقول about هنا. والآن، بامتلاكنا هذه، يلزمنا أن نبني شجرتنا. ولِفعل ذلك نُعرِّف شجرتنا.

[03:57] إذًا فلنُنشئ ثابتًا هو router، أو لنقل routeTree، ونأخذ rootRoute لَدَينا، ونستدعي دالة تُسمّى addChildren.

[04:08] إذًا نعم، علينا فعل ذلك. فعلى الرغم من أنّنا حدّدنا أنّ هذا المسار ابنٌ لمسار الجذر، ما زلنا مضطرّين إلى تعريف شجرتنا عن طريق إضافة أبناء إلى مسار الجذر لَدَينا. فإذا هنا، يمكننا إضافة مصفوفة (array) من الأبناء. في حالتنا، نمتلك

[04:23] مسار indexRoute، وأنّنا نمتلك مسار aboutRoute.

[04:27] وبالطبع، يمكن أن تكون هذه الشجرة أكبر.

[04:29] يمكننا — يمكننا إضافة أبناء إلى aboutRoute وما إلى ذلك. فلنُبقِ الأمر بسيطًا في الوقت الحالي.

[04:35] أخيرًا، نُنشئ موجّهنا. فلنُنشئ موجّهنا، ولِفعل ذلك نستدعي دالة createRouter. إذًا createRouter من ‏TanStack، عذرًا، ونُمرّر شجرتنا هكذا في خيار يُسمّى routeTree.

[04:55] إذًا نمرّر له شجرة المسارات (route tree) التي نُعرِّفها هنا. والآن أخيرًا يلزمنا أن نصيّر موجّهنا. فداخل هذا، بدلًا من تصيير مكوّن app هذا، يلزمنا أن نصيّر موجّهنا. إذًا، ما يفعله هذا، أنّه يأخذ عنصرًا

[05:06] بمعرّف (id) هو root. فإذا ألقينا نظرة على ملف index.html لَدَينا، نجد أنّ لَدَينا div بمعرّف هو root، وداخل هذا يلزمنا أن نصيّر تطبيقنا بوصفه الموجّه لَدَينا. إذًا نأخذ هذا العنصر، ثم نُصيِّر، و

[05:20] داخل StrictMode هنا يمكننا استيراد دالة تُسمّى RouterProvider من TanStack، ثم نمرّر لها الموجّه الذي أنشأناه هنا. إذًا router، ونمرّر موجّهنا. الآن إذا حفظنا، وكما ترى، نحصل على مسار الجذر لَدَينا. غير أنّه

[05:38] في الوقت الحالي، نحن نزُر home لَدَينا.

[05:40] إذًا من المفروض أن نحصل على نصّ home هذا أيضًا، غير أنّنا لا نحصل عليه لأنّه داخل مسار الجذر لَدَينا يلزمنا أن نصيّر أبناءنا. فهذا مسار الجذر سَيَمتلك أبناء، ويلزمنا أن نصيّر هذه.

[05:51] ولِفعل ذلك في موجّه TanStack Router نستخدم مكوّنًا يُسمّى Outlet (المنفذ). فعند إضافة Outlet هنا سَنحصل على أبنائنا. والآن يمكننا الذهاب إلى home. ويمكننا الذهاب إلى about أيضًا.

[06:05] تمام. هنا يمكننا أيضًا إضافة أدوات المطوّر (devtools) لَدَينا. فتذكّر حين ثبّتنا موجّه TanStack Router، ثبّتنا أيضًا بعض أدوات المطوّر. فإذا استوردنا أدوات المطوّر هذه، مكوّن TanStackRouterDevtools، هكذا. تذكّر أنّ هذا

[06:22] مُستورد من هنا، ‏TanStackRouterDevtools، ولنحفظ. سَنحصل على هذا. ويمكننا أيضًا تغيير موضعه (position). إذًا يمكننا وضعه ربّما في أعلى اليمين. لنقل أنّه سَنحصُل عليه هنا. إذا نقرنا على هذا، فهو سَيَحتوِي

[06:41] على قدر كبير من المعلومات المفيدَة التي سَنراها أكثر على مدار الفيديو. غير أنّه ما يمكننا فعله، على سبيل المثال: في الوقت الحالي نحن لا نمتلك أيّ روابط (links) للتنقّل بين home وabout. يمكننا فعل ذلك من

[06:53] هنا. وهنا سَنحصُل على مساراتنا، والمعَلَّمةُ منها باللون الأخضر هنا سَتَكُون المسارات المُطابَقة حاليًا، أو المكوّنات المُصيَّرة حاليًا.

[07:03] إذًا نحن في home. فالمكوّنات المُصيَّرة سَتَكُون الجذر (root) والمكوّن home. إذًا هذا ما نحصُل عليه هنا: root ثم home. ويمكننا الذهاب إلى about بالنقر على هذا السهم.

[07:14] والآن سَتَكُون الأخضر منها root وabout وما إلى ذلك. وبالطبع، كلّما أنشأنا مساراتٍ أكثر تعقيدًا، سَكانَ هذا أكثر نفعًا، حيث سَيعرض الشجرةَ، شكلَ الشجرة إذا امتلكنا الكثير من

[07:28] الأشياء المتداخلة وما إلى ذلك. لكن الآن، فلنَرَ كيف