طرق أخرى للتنقّل برمجيًّا

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

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

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

الفرع: other-navigation

[00:01] أحيانًا نودّ أن نتنقّل إلى مسارٍ معيّن برمجيًّا من دون استخدام رابط (link). وفي TanStack Router يمكننا فعل ذلك أيضًا باستخدام خُطّاف (hook) useNavigate. لكن تأكّد من أنّك لا تستخدم هذه الطريقة إلا في المواقف التي

[00:15] لا تستطيع فيها استخدام الرابط بأيّ شكلٍ. فلنقل مثلًا في مسار تحرير المنشور لَدَينا أيضًا. فلنذهب إلى posts/$postId/edit بمعرّفٍ ما ولننتقل إلى هذا المسار هنا كذلك.

[00:32] وفلنقل إن كان لَدَينا استمارة (form)، فعند إرسال (submit) هذه الاستمارة سنحفظ منشورنا، وعند حفظنا للمنشور نحتاج إلى التنقّل عائدين إلى المنشور. فنحن في posts/$postId/edit ونحتاج إلى التنقّل عائدين إلى posts/$postId.

[00:48] غير أنّه لا يمكننا فعل ذلك باستخدام رابط.

[00:50] نحتاج إلى القيام به عند إرسال استمارتنا بعد حفظ منشورنا مثلًا. فلنقل إن كان لَدَينا هنا استمارة — عذرًا — استمارة. وفلربّما لا نضع action، بل نضع مُعالِجًا (handler) باسم onSubmit. onSubmit. وفي الاستمارة،

[01:06] فلنضع زرًّا (button) للإرسال (submit).

[01:10] والآن عند الإرسال، داخل حدثنا (event)، فلنستدعِ event.preventDefault(). وفلنحاكي أنّنا نقوم بشيءٍ ما بإضافة مهلة (timeout) وهمية هنا. وفلنجعل هذه الدالّة async أيضًا. وبعد هذه المهلة فلنقل إنّ منشورنا

[01:26] قد حُفظ الآن وأنّنا نحتاج إلى التنقّل عائدين إلى المنشور نفسه. فما يمكننا فعله: هنا لدينا هذا الخُطّاف (hook) الذي يمكننا استيراده، وهذا ليس داخل Route، إذ يمكننا استيراده في كل مساراتنا. فلننشئ

[01:41] ثابتًا (const) اسمه navigate ثم نستورد useNavigate من TanStack Router هكذا. وفي هنا يمكننا أيضًا تمرير from حتى نتمكّن من التنقّل إلى مساراتٍ نسبية. فلنقل إن كنّا نحتاج إلى التنقّل من مسارنا الحالي،

[01:57] فإن كنا نملك وصولًا إلى Route هنا، فيمكنك تمرير route.fullPath، وهو مسار تحرير المنشور.

[02:06] والآن باستخدام هذا الكائن navigate يمكننا التنقّل، أو — عذرًا — هذا في الواقع دالّة يمكننا استدعاؤها للتنقّل. ففي هنا يمكننا ببساطة استدعاء هذه الدالّة navigate ووضع في داخلها الخيارات نفسها التي

[02:20] نضعها في رابط. فلنقل مثلًا to، ويمكن أيضًا أن يكون لَدَينا معاملات البحث (search parameters) ومعاملات URL وما إلى ذلك.

[02:28] لكن فلنضع to ونحتاج إلى التنقّل إلى المنشور ذي المعرّف. وبالطبع يمكننا فعل ذلك هكذا: posts/$postId، لكن حينها سنضطر إلى تمرير المعرّف في معاملاتنا (params) هكذا.

[02:41] وما يمكننا فعله ببساطة هو أن نصعد مستوىً واحدًا في شجرتنا؛ وبما أنّنا في posts/$postId/edit فعلًا فسنحتاج إلى الصعود مستوىً واحدًا، ولهذا، بما أنّنا حدّدنا from هنا، فيمكننا فقط أن نصعد مستوىً واحدًا هكذا.

[02:58] وبفعل ذلك، فلنرسل هذه الاستمارة وننتظر ثوانٍ قليلة فينبغي أن نعود إلى مسار posts/$postId. وأمرٌ أودّ ذكره هو أنّه يمكننا الوصول إلى هذه الدالّة navigate من دون حتى استخدام هذا الخُطّاف، ما معناه

[03:15] أن نتنقّل في تطبيقنا خارج مكوّننا. إذ لا نضطر إلى استخدام هذا الخُطّاف. وكيف؟ بالبرمجة.

[03:22] فتذكّر حين عرّفنا الـ router — وكان ذلك في main.tsx — وهناك عرّفنا هذا الـ router. هذا الـ router يحتوي مسبقًا على الطريقة (method) navigate، أي دالّة التنقّل navigate، ويمكننا أن نمرّر أشياءنا وما إلى ذلك للتنقّل

[03:39] في router التابع لنا في أيّ مكانٍ في تطبيقنا، حتى خارج مكوّناتنا. إذن لا نضطر إلى استخدام الخُطّاف useNavigate. أظنّ أنّ هذا ربّما شيءٌ لن تقوم به غالبًا، لكن ينبغي أيضًا أن تعرف أنّ هذا ممكن.

[03:53] وطريقةٌ أخرى للتنقّل هي استخدام مكوّن Navigate. فأحيانًا في أحد المسارات قد تحتاج إلى التنقّل فورًا إلى مسارٍ آخر قبل تصيير (render) المسار الذي تحاول زيارته. فلنرَ مثلًا

[04:07] في مسار about هنا. فلنذهب إلى هذا المسار about هنا وفلنقل إن كان ربّما بناءً على شرطٍ ما نحتاج إلى التنقّل إلى مسارٍ آخر، عند محاولة زيارة مسار about. فربّما لدينا شرطٌ

[04:25] هنا، وسأضيف فقط if true، وهذا بالطبع بلا معنى، لكن فلنقل إنّ لَدَينا شرطًا هنا. وإن صحّ هذا الشرط فسنحتاج إلى التنقّل إلى مسارٍ آخر. في هذه الحالة يوصى باستخدام هذا

[04:36] مكوّن Navigate الذي يمكننا استيراده من @tanstack/react-router، بدلًا من استخدام الخُطّاف useNavigate. وهنا — عذرًا — بالطبع نحتاج إلى إعادة (return) هذا. ثم يمكنك التنقّل إلى مساراتٍ أخرى وسيكون

[04:52] لديك كل الخيارات التي يمكنك تمريرها إلى Link. فلنتنقّل ربّما إلى posts.

[04:59] فالآن، كما ترى، إن حاولنا زيارة about — أنا أنقر على about هنا — فستنتهي بنا الحال إلى posts. وإن حاولنا زيارتها عبر عنوان URL فسنصل إلى posts.

[05:13] فهذه أيضًا طريقةٌ أخرى ممكنة للتنقّل في تطبيقاتك المبنية على TanStack Router. وآخر أمرٍ أودّ ذكره بخصوص التنقّل قبل أن ننتقل إلى شيءٍ آخر هو أنّه لدينا أيضًا اثنان هنا: خُطّاف (hook)

[05:26] ومكوّن، وقد يفيدان أحيانًا، وهما useMatchRoute والمكوّن MatchRoute. فيمكنك استخدامهما للتحقّق إن كان مسارٌ ما مطابَقًا (matched) حاليًّا، ويمكنك أيضًا التحقّق إن كان المسارُ المطابَقُ حاليًّا قيد الانتظار (pending)

[05:40] من عدم، أي إن كان يُحمَّل حاليًّا من عدم.

[05:42] وقد يكون هذا مفيدًا إذا أردت أن تعرض ربّما نوعًا ما من مؤشّر الانتظار (spinner) عند تنقّلك بين مساراتٍ مختلفة. فلدينا مكوّنٌ هنا. ولدينا مثالٌ هنا يتضمّن مكوّنًا ولدينا فيه رابطٌ يصل إلى مسارٍ

[05:53] اسمه users، ثم نستخدم هذا المكوّن MatchRoute للتحقّق إن كان مسار users قد طابَق (match) وهو قيد الانتظار (pending). فإن كان قد طابَق وهو قيد الانتظار فسنحتاج إلى عرض مؤشّر انتظارٍ ربّما بعد هذا الرابط users. فهذا

[06:07] شيءٌ يمكن فعله بهذا المكوّن. ويمكنك أيضًا تمرير دالّة هنا، ويمكنك أيضًا استخدامه بهذه الطريقة: استخدام خُطّاف؛ استخدام useMatchRoute. من هذا الخُطّاف ستحصل على دالّة. ويمكنك تمرير المسار الذي

[06:21] تحتاج إلى التحقّق من مطابقته.

[06:23] ويمكنك أيضًا تمرير pending. ويمكنك القيام بشيءٍ ما إن كان هذا المسارُ قد طابَق وهو حاليًّا قيد الانتظار داخل أثرٍ (effect) مثلًا، أي خارج الترميز (markup) عندك. وإن احتجت إلى استخدامه في الترميز فسيكون خيار المكوّن

[06:36] أنسب في هذه الحالة. لكنّي أظنّ أنّه ربّما هذا كل ما نحتاج إلى القيام به بخصوص التنقّل الآن. فلننتقل الآن إلى شيءٍ آخر وهو السياق (context). وفي TanStack Router لدينا هذا