شرح صفوف ومحتوى الفقرة
اختر أداة الربط المناسبة لكل سياق بدقة: استخدم <NavLink> داخل القوائم والتبويبات التي تبرز مكان المستخدم الحالي، واستخدم <Link> لسائر الانتقالات الداخلية كالبطاقات والشعار، واحتفظ بوسم <a href="..."> القياسي للروابط الخارجية وروابط البريد والهاتف وتنزيل الملفات المباشر. يجمع الجدول التالي قواعد الاختيار:
| عنصر التنقل | السيناريو الهندسي الأنسب | سلوك التحميل ودعم الوصول |
|---|---|---|
<Link to="..."> | البطاقات الداخلية والشعار ومسارات التصفح | انتقال فوري دون تحميل مع حفظ حالة التطبيق |
<NavLink to="..."> | الشريط العلوي والقوائم الجانبية والتبويبات | انتقال فوري مع إضافة .active وسمة aria-current="page" |
<NavLink end> | روابط الجذر الأب مثل /dashboard | مطابقة دقيقة لنهاية المسار دون التداخل مع الفروع |
<a href="..."> | المواقع الخارجية وتنزيل الملفات والبريد | انتقال متصفح قياسي خارج حدود شجرة الصفحة الواحدة |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعرفت في هذا الدرس على سبب مسح الروابط التقليدية لحالة التطبيق، واستخدمت مكون Link للتنقل الداخلي الفوري، وميزت القوائم النشطة بمكون NavLink وخاصية end مع سمة الوصول التلقائية aria-current وقواعد المفاضلة بين أدوات الربط. الخطوة التالية: انتقل الآن إلى الدرس رقم 49 «المسارات الديناميكية ومعاملات البحث في React Router» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.