ضبط المطابقة الدقيقة بخاصية end | التنقل التصريحي وتمييز الرابط النشط عبر Link وNavLink

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

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

يطابق مكون <NavLink to="/dashboard"> افتراضياً بادئة المسار ليبقى قسم اللوحة مضاءً أثناء تصفح فروعه مثل /dashboard/billing. لكن عند وجود رابطين في نفس القائمة: أحدهما لملخص اللوحة /dashboard والآخر للفواتير /dashboard/billing، سيُضاء الرابطان معاً بغير قصد!

إضافة الخاصية المنطقية end في <NavLink to="/dashboard" end> تشترط انتهاء المسار عند هذا الحد بالضبط كي يُعد نشطاً.

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

HTML

<nav className="rx-nav">
  <NavLink to="/dashboard" end>Overview</NavLink>
  <NavLink to="/dashboard/billing">Billing</NavLink>
  <NavLink to="/dashboard/security">Security</NavLink>
</nav>

جرّب بنفسك

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

Exact Matching with end Prop ضبط المطابقة الدقيقة بخاصية end

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

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