الموجّه بالملفات (File Based Router)

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

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

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

الفرع: file-based-conversion

[00:02] بعض المسارات التي أنشأناها إلى النهج المعتمد على الملفات (file-based approach). إذًا أولًا، ما نحتاج إلى فعله هو أن ننشئ في مجلد المصدر (source folder) لدينا مجلدًا (folder) اسمه `routes`. فلننشئ مجلدًا جديدًا اسمه `routes`. ويمكن تخصيص هذا الاسم

[00:17] بالمناسبة، لكنه افتراضيًا (by default) يجب أن يكون `routes`. والآن نحتاج إلى نقل المسار الجذر (root route) والمسار الرئيسي (index route) ومسار about إلى ملفات داخل هذا المجلد.

[00:29] إذًا هنا، لإنشاء المسار الجذر نُنشئ ملفًا جديدًا ويجب أن يُسمّى `_root`

[00:38] `tsx`؛ ثم بمجرد إنشاء هذا الملف، وكما ترى، وبدون أن نفعل أي شيء، ستُولَّد بعض الشيفرة تلقائيًا هنا.

[00:46] إذًا بدلًا من أن نضطر إلى استدعاء `createRootRoute` بأنفسنا وتمرير المكوّن وما إلى ذلك، فبمجرد إنشاء هذا الملف تُولَّد هذه تلقائيًا.

[00:55] والآن هنا يمكننا ربما أن ننسخ مكوّننا من هنا ونضعه هنا.

[01:07] وكذلك علينا فقط أن نستورد ما نحتاجه: `Link`، وأدوات المطوّر `Devtools` — عذرًا — أدوات المطوّر `Devtools`، هكذا.

[01:15] الآن يمكننا حفظ هذا. وبالمناسبة لا نحتاج إلى هذا. والآن يمكننا ببساطة إزالة هذا من الملف القديم. ثم نحتاج إلى فعل الشيء نفسه بالنسبة إلى المسار الرئيسي (index route) ومسار about. فببساطة، في مجلد `routes` لدينا يمكن أن ننشئ ملفًا جديدًا

[01:32] اسمه `about.tsx`، وكما ترى سيولَّد تلقائيًا. لسنا بحاجة إلى تحديد هذا المسار بأنفسنا، وإذا أعدنا تسمية الملف فسيُحدَّث تلقائيًا أيضًا. لسنا بحاجة إلى

[01:45] أن نفعل أي شيء. ويُمرَّر المكوّن إلينا هنا. والآن يمكننا ببساطة — هذا هو about — فلننسخ مكوّن about ونضعه هنا، وأخيرًا لنفعل الأمر نفسه بالنسبة إلى index. ولنُزل هذا

[02:00] من هنا.

[02:02] وبالنسبة إلى index، سنحتاج إلى إنشاء ملف اسمه `index.tsx` كذلك، وكذلك نسخ المكونات من هنا ببساطة ووضعها هنا، وإزالة هذا من هنا.

[02:21] حسنًا. بهذا، إذا نظرنا إلى مجلدنا، سنجد شجرة المسارات (route tree) هذه وقد وُلِّدت لنا، أي ملف `routeTree.gen.ts` هذا.

[02:32] إذا فتحنا هذا، فهذه هي شجرة المسارات نفسها التي أنشأناها يدويًا هنا عندما استخدمنا النهج المعتمد على الشيفرة (code-based approach). أما الآن عند استخدام النهج المعتمد على الملفات فستُولَّد تلقائيًا لنا. إذًا لدينا

[02:46] شيئًا من ما يتعلق بـ TypeScript قد وُلِّد هو الآخر، ولدينا شجرتنا هنا وقد أُنشئت لنا، وهذه هي التي يمكننا استيرادها واستخدامها لتهيئة موجّهنا. فبدلًا من هذا يمكننا الآن إزالة هذا واستيراد

[03:02] الشجرة من هذا الملف المولَّد. فلنستورد هكذا من `routeTree.gen` شجرة الموجّه (router tree) المولَّدة هذه ونمرّرها إلى `createRouter`، ولنُزل أيضًا عمليات الاستيراد غير المستعملة. وأظن أن هذا كل شيء،

[03:19] فلنحفظ فلنحدّث هنا، وكما ترى كل شيء ما زال يعمل بالطريقة نفسها. لكن كما رأيت هنا، عندما نُنشئ مسارًا (route) — فمثلًا في هذا `about.tsx` أو `index.tsx` — علينا أيضًا تمرير المسار (path)، وذلك من أجل

[03:36] الحصول على ما يتعلق بسلامة الأنواع (type safety)، رغم أنّ هذا المسار يمكن أن يُستنتَج ربما من اسم الملف. فاسم الملف هو about، فربما يُستنتَج أنّه `/about`. غير أننا ما زلنا مضطرين إلى تمريره كي تعمل سلامة الأنواع.

[03:49] كما قيل، لسنا مضطرين إلى تمريره يدويًا؛ إذ ستُولَّد لنا هذه القيمة تلقائيًا. وإذا غيّرنا هذا مثلًا، فكما ترى، نحصل على خطأ. فإذا غيّرنا هذا عن غير قصد، فسَنحصل على

[04:01] خطأ. كما أنّه إذا غيّرنا اسم المجلد فسيُحدَّث لنا تلقائيًا أيضًا. فلنقل `about-us` مثلًا.

[04:10] الآن، وكما ترى، تحدّث هذا تلقائيًا؛ فلنعده إلى `about`، وهنا فينبغي أن يعود إلى `about`. إذا حصلت على خطأ هنا بعد إعادة تسمية الملف فلست متأكدًا من

[04:26] سبب حدوث ذلك، لكن عندما أعيد أحيانًا تسمية الملف، يُفتَح ملف `routeTree` المولَّد تلقائيًا، وعندما أغلقه فقط دون حفظ أي شيء يزول الخطأ. ولست متأكدًا من

[04:40] سبب حدوث ذلك؛ لكن على أي حال يمكنك ببساطة إغلاق ملف الشجرة المولَّد. وكما ترى، مع النهج المعتمد على الملفات هذا ستُنجَز لنا أشياء كثيرة خلف الكواليس. وتمكّنا من جعل هذا الملف

[04:55] أصغر بكثير. لسنا مضطرين إلى تعريف أي مسارات بأنفسنا، وهذه الشجرة ستولَّد لنا تلقائيًا. وإذا نظرنا هنا فإننا نحصل على مزايا كثيرة كذلك. فالبساطة: يصير فهم ما يحدث

[05:08] أسهل كثيرًا عندما تكون مساراتك منظمة في مجلد، وهو ما يجعل شيفرتنا أيضًا أكثر تنظيمًا، وأكثر قابليةً للتوسّع (scalable). ولا نحتاج إلى فعل أشياء كثيرة يدويًا بأنفسنا. وفي اللاحق سنرى أيضًا أنه يمكننا القيام بتقسيم الشيفرة (code splitting)

[05:21] بكل سهولة عندما نستخدم النهج المعتمد على الملفات، على عكس النهج المعتمد على الشيفرة الذي سيتطلب منا فعل أشياء كثيرة يدويًا.

[05:30] وبالطبع سَنحصل على كثير من ميزات سلامة الأنواع جاهزةً من الصندوق (out of the box) بمجرّد أن نسمح لموجّه (router) TanStack Router بتوليد كثيرٍ من الشيفرة المتعلقة بـ TypeScript عندما نستخدم النهج المعتمد على الملفات هذا.

[05:41] لكن الآن، وبما أننا نستخدم النهج المعتمد على الملفات، فلنتركّز الآن على استكشاف ميزات أكثر في TanStack Router. ولنبدأ بالمسارات المتداخلة (nested routes) والتخطيطات (layouts). فلنرَ الآن كيف يمكننا أن نتداخل