NavLink تنسيق التنشيط في NavLink
آخر تحديث: 2026-11-03
NavLink تنسيق التنشيط في NavLink
NavLink هو رابط يدرك حالة التنشيط: عندما يطابق العنوان الحالي خاصيته to، يضيف تلقائيًا اسم صنف active للوسم a المُرسَم، أو يستدعي دالة className الخاصة بك. تستخدم أشرطة التنقّل والجانبية إياه لإبراز الصفحة التي يزورها الزائر، بكود أقل بكثير من مقارنة الموقع يدويًا في كل مرة.
| المجموعة | التوجيه وإدارة الحالة |
|---|---|
| النوع | مكوّن |
| منذ الإصدار | React Router 6.4 |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
import { NavLink } from 'react-router-dom'
<NavLink
to="/about"
className={({ isActive }) => isActive ? 'nav-item active' : 'nav-item'
}>About</NavLink>
// Shorthand: adds class="active" by default on a match
<NavLink to="/about">About</NavLink>⚙️ المعاملات
| to | مسار الوجهة، مثل /users/42؛ وتعمل أيضًا المسارات النسبية والصيغة الكائنية { pathname, search }. |
|---|---|
| className | إمّا سلسلة نصية، أو دالة ({ isActive }) => string تعيد اسم الصنف بحسب حالة التنشيط. |
القيمة المرجعة：لا شيء (إنه مكوّن). يرسم وسم a واحدًا ويحمل التنسيق النشط ما دام العنوان الحالي يطابق to.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
النقر على عنصر يحوّله إلى أزرق غامق ويعرض علامة ✓ — نفس أثر NavLink الحقيقي الذي تقوده isActive في دالة className (عرض توضيحي محاكى).💡 النقاط الأساسية
💡 نصيحة تتحكّم خاصية end في المطابقة «الدقيقة»: مع end على /users لا يُبرز الرابط /users/42؛ وبغيرها تكون المطابقة ببادئة المسار.
ℹ️ ملاحظة في 6 يقبل كل من className وchildren توقيع دالة ({ isActive, isPending }) => …، وفي 7 يُضاف isTransitioning.
⚠️ تحذير يرسم NavLink وسم a حقيقيًا؛ فلا تمنع السلوك الافتراضي في onClick وتنتقل يدويًا، دع Router يتولّى التنقّل.
🏷️ المزيد من التوجيه والحالة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س ما الفرق بين NavLink وLink؟
ج يعملان بالطريقة نفسها (كلاهما وسوم a تنتقل دون إعادة تحميل)؛ الفرق الوحيد أن NavLink يكشف حالة التنشيط isActive، وهي ما تحتاجه أشرطة التنقّل. استخدم Link للقفزات العادية.
س كيف أُبرز /users فقط عند التطابق التام؟
ج أضف خاصية end: <NavLink to="/users" end>، التي تُعطّل المطابقة ببادئة المسار الافتراضية.
س هل يمكن تغيير النص عند التنشيط لا الصنف فقط؟
ج نعم، يقبل children أيضًا دالة: ({ isActive }) => isActive ? 'الحالي: حول' : 'حول'.
