المسارات الشاملة (Catch-All Routes)

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

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

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

الفرع: rest-params

[00:01] نعرف كيف يكون لدينا معامل ديناميكي (dynamic parameter) في عنوان URL لدينا، غير أن ما رأيناه هو معامل ديناميكي لمقطع (segment) واحد فقط، فكان لدينا في هذا المثال مثلًا posts/‏id، فلم يكن هناك سوى مقطع واحد ديناميكي هنا. أحيانًا،

[00:16] غير أنه قد تكون لدينا عدة مقاطع ديناميكية، فعلى سبيل المثال قد يكون لدينا مسار على الصيغة file/ أي مسار يليه مسارٌ إلى ملف، ففي هذه الحالة قد يكون لدينا ربما x/y/z.txt وهكذا دواليك. وفي هذه الحالة يكون

[00:33] هذا الجزء كله ديناميكيًا، فتتوفر لدينا هنا عدة مقاطع، فلدينا x وy وz وهكذا دواليك، ونحتاج إلى أن يكون المقطع الديناميكي لدينا يشمل كل ذلك، لا هذا الجزء x وحده الذي يقع بعد file. وتمامًا كصياغة الراوترات (routers) الأخرى التي

[00:49] ربما استخدمتها من قبل، يتوفر لنا في TanStack Router كذلك سبيل لالتقاط عدة مقاطع في عنوان URL. فلنرَ كيف يمكننا فعل ذلك. فما يمكننا فعله هو القدوم إلى هنا ولنقل أننا نُنشئ هذا المسار file/ ثم شيئًا ما.

[01:04] غير أن هذا الشيء ما هو إلا عدة مقاطع لا مجرد مقطع واحد. ففي مجلد routes نُنشئ ملفًا جديدًا، فلنسمه file ثم النقطة، ولالتقاط كثير من المقاطع نستخدم علامة الدولار من دون أي اسم هنا. فإذا منحنا

[01:18] اسمًا ما هنا، فسيكون هذا المعامل لمقطع واحد فحسب. لكن إذا احتجنا إلى التقاط عدة مقاطع فنكتفي باستخدام علامة الدولار على هذا النحو ثم ببساطة tsx.

[01:30] والآن سيمكننا هنا الحصول على معاملنا واستخدامه على هذا النحو. فتذكّر أننا استخدمنا الاستدعاء route.useParams، أي الخطِّاف route.useParams، للحصول على معاملنا الديناميكي، وسنستخدم هذا الخطِّاف نفسه، غير أنه لكي نحصل

[01:49] على هذا المقطع كله، أي x/y/z وهكذا دواليك وكل ما يقع بعد file، فبوسعنا الوصول إليه باستخدام _splat على هذا النحو. ولنضِف ربما سطرًا جديدًا هنا، ولنقل filePath، ونعرضه.

[02:09] والآن إذا حفظنا هذا وذهبنا إلى هذا المسار في الحال فكما ترى سنحصل على مسار الملف filePath وقد التُقط كل ما بعد file، أي x/y/z.txt، صحيح؟ وبالطبع يمكننا أن نضم هذا مع معاملات أخرى كذلك، فلنقل

[02:28] أن عنوان URL لدينا سيكون file، لكن المسار لن يقع مباشرة بعد file، فقد يكون لدينا ربما معرّف ما للملف أولًا ثم المسار، ونحتاج إلى التقاط

[02:41] هذا المعرّف في معامل منفصل، ثم التقاط الباقي في هذا المعامل الشامل (splat) الذي نحصل عليه هنا. عذرًا. فكيف يمكننا فعل ذلك؟ ببساطة نستطيع إنشاء معامل آخر.

[02:54] فقبل علامة الدولار سيتوفر لنا معرّف للملف، فبوسعنا ببساطة أن نعيد تسمية هذا إلى file متبوعًا بالنقطة ثم علامة الدولار، مع منح اسمٍ لمعامل المعرّف الذي سيتوفر بعد file: فلنقل

[03:10] file ID، ثم النقطة وعلامة الدولار والتي ستلتقط كل ما يقع بعد هذا المعرّف. فإذا حفظنا هذا وعدنا إلى هنا وزرنا لمسار يكون ربما file/ ثم معرّف ما/ ثم xyz.txt

[03:29] وهكذا دواليك. والآن كما ترى ما نزال نحصل على x/y/z.txt بوصفها مسار الملف filePath، ونحن لا نحصل على أي شيء من هذا المعرّف الذي وضعناه هنا.

[03:41] وإذا احتجنا إلى الوصول إلى هذا المعرّف فهو سيكون معاملًا منفصلًا يمكننا الحصول عليه هنا.

[03:46] أي file ID. فلنعرضه هو الآخر: file ID، ونضع هذا، فيكون لدينا هذا في معامل منفصل.

[03:56] ويمكن أيضًا مثلاً أن تسبق معاملاتنا بادئات (prefixes) أو لواحق (suffixes).

[04:02] فلنفرض مثلًا أن بادئة ما ستسبق معرّفنا: لنقل file- ثم المعرّف، ونحتاج إلى التقاط هذا الجزء فقط لمعامل المعرّف لدينا. فإذا زرنا هذا الآن حصلنا بالطبع على file-

[04:18] بوصفه جزءًا من معرّفنا، لكننا لا نحتاج إلى ذلك؛ فما نحتاج إليه هو التقاط هذا الجزء وحده.

[04:22] ولتحقيق ذلك بوسعنا إعادة تسمية هذا الملف فنضع file- هنا ثم نضع معاملنا بين قوسين معقوصين (curly brackets) على هذا النحو.

[04:34] فإذا حفظنا هذا وعادنا إلى هنا فكما ترى نحصل على هذا الجزء وحده بوصفه معرّفنا ومع أن file- موجود في عنوان URL لدينا. فمارأينا أن نجرّب شيئًا أخيرًا: لنقل أننا نريد أن يكون مسار ملفنا x/yz مثلاً

[04:55] من دون جزء txt، أي لنقل أن ملفنا سيكون دائمًا txt مثلًا وأننا نحتاج فقط إلى هذه الجزئية من دون txt، فبوسعنا أن نجعل txt جزءًا من اسم ملفنا ونقتصر بجعل هذه الجزئية وحدها معاملنا

[05:12] الديناميكي. فببساطة نأتي إلى هنا ونعيد تسمية هذا من جديد. وفي هذه الحالة نحتاج إلى التقاط أي شيء قبل txt، غير أنه إذا وضعنا النقطة هنا فسيؤدي ذلك إلى إعلان أن هذا مسار ابن، ونحن لا نحتاج إلى ذلك؛ إذ

[05:29] نحتاج فقط إلى أن يكون .txt لواحقًا لما يقع بعد علامة الدولار هذه.

[05:35] فبدلًا من النقطة وحدها نضعها بين قوسين مربعين على هذا النحو، ثم txt.

[05:42] ثم نحتاج كذلك إلى وضع علامة الدولار بين قوسين معقوصين على هذا النحو.

[05:48] وبذلك يلتقط أي جزء يقع بعد معرّف الملف وقبل txt ضمن علامة الدولار هذه، ويمكننا الوصول إليه باستخدام هذا المعامل _splat.

[06:01] فإذا حفظنا هذا فكما ترى سنحصل على مسار الملف من دون txt وسنحصل على معرّفنا كالمعتاد، وبالطبع كما ترى يمكنك أن تتجاوز الحدود عند هذه النقطة؛ فيمكنك تنفيذ أشياء ديناميكية كثيرة هنا.