تمييز الرابط النشط بمكون NavLink | التنقل التصريحي وتمييز الرابط النشط عبر Link وNavLink

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تحتاج أشرطة التنقل العلوية والقوائم الجانبية إلى تمييز بصري يخبر المستخدم بالقسم المفتوح حالياً. يقدم مكون <NavLink> نسخة مطورة من <Link> تتحقق تلقائياً من مطابقة وجهتها للعنوان النشط.

يضيف <NavLink> افتراضياً الصنف active عند التطابق، كما يقبل دالة مرنة في خاصية className={({ isActive }) => ...} أو style لتخصيص الألوان بدقة.

الصف 2 صورة توضيحية

مخطط يوضح ركائز التنقل التصريحي: مكون Link السريع ومكون NavLink التفاعلي وخاصية end مع سمة الوصول aria-current

الصف 3 كود برمجي

HTML

<nav className="rx-nav">
  <NavLink
    to="/tracks"
    className={({ isActive }) => isActive ? 'on' : ''}
  >
    Tracks
  </NavLink>
  <NavLink to="/mentors">Mentors</NavLink>
</nav>

جرّب بنفسك

الصف 4 ملاحظة هامة

Highlighting Active NavLink تمييز الرابط النشط بمكون NavLink

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (التنقل التصريحي وتمييز الرابط النشط عبر Link وNavLink)