في هذا الدرس 6تصفّح المواضيع
عند التنقل بين شاشات التطبيق الواحد، يؤدي كتابة وسم رابط تقليدي مثل <a href="/courses"> إلى تفعيل سلوك المتصفح الافتراضي الذي يهدم الصفحة الحالية ويمسح ذاكرة JavaScript، فتعود كل قيم useState والسياقات المشتركة إلى نقطة الصفر.
باستخدام مكون <Link to="/courses"> من حزمة react-router-dom للروابط الداخلية، تعترض المكتبة النقرة الاعتيادية عبر event.preventDefault() وتبدل الشاشة لحظياً مع احتفاظ التطبيق بكامل حالته.
<BrowserRouter>
<nav className="rx-nav">
<Link to="/">Catalog ({count})</Link>
<Link to="/cart">Cart</Link>
</nav>
<Routes>
<Route path="/" element={<Catalog add={onAdd} />} />
<Route path="/cart" element={<Cart n={count} />} />
</Routes>
</BrowserRouter>تحتاج أشرطة التنقل العلوية والقوائم الجانبية إلى تمييز بصري يخبر المستخدم بالقسم المفتوح حالياً. يقدم مكون <NavLink> نسخة مطورة من <Link> تتحقق تلقائياً من مطابقة وجهتها للعنوان النشط.
يضيف <NavLink> افتراضياً الصنف active عند التطابق، كما يقبل دالة مرنة في خاصية className={({ isActive }) => ...} أو style لتخصيص الألوان بدقة.
يطابق مكون <NavLink to="/dashboard"> افتراضياً بادئة المسار ليبقى قسم اللوحة مضاءً أثناء تصفح فروعه مثل /dashboard/billing. لكن عند وجود رابطين في نفس القائمة: أحدهما لملخص اللوحة /dashboard والآخر للفواتير /dashboard/billing، سيُضاء الرابطان معاً بغير قصد!
إضافة الخاصية المنطقية end في <NavLink to="/dashboard" end> تشترط انتهاء المسار عند هذا الحد بالضبط كي يُعد نشطاً.
لا تكفي الألوان وحدها لإرشاد مستخدمي قارئات الشاشة إلى الصفحة المفتوحة حالياً. لذلك يضيف مكون <NavLink> تلقائياً السمة القياسية aria-current="page" على عنصر الرابط النشط في DOM فور مطابقته، مما يُنطق صوتياً بوضوح ويتيح أيضاً تنسيق العنصر مباشرة بالمحدد الدلالي a[aria-current="page"].
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعرفت في هذا الدرس على سبب مسح الروابط التقليدية لحالة التطبيق، واستخدمت مكون Link للتنقل الداخلي الفوري، وميزت القوائم النشطة بمكون NavLink وخاصية end مع سمة الوصول التلقائية aria-current وقواعد المفاضلة بين أدوات الربط. الخطوة التالية: انتقل الآن إلى الدرس رقم 49 «المسارات الديناميكية ومعاملات البحث في React Router» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Declarative Navigation التنقل التصريحي
- توصيف روابط الانتقال مباشرة داخل بنية JSX عبر مكوني Link وNavLink بدلاً من الأوامر اليدوية.
- للمراجعة
- 02 NavLink مكون الرابط النشط
- مكون تنقل ذكي يكتشف تطابق عنوانه مع المسار المفتوح فيضيف تنسيق النشاط وسمة الوصول تلقائياً.
- للمراجعة
- 03 end Prop خاصية المطابقة النهائية
- خاصية منطقية في NavLink تمنع بقاء رابط المسار الأب نشطاً عند الانتقال إلى مساراته الفرعية.
- للمراجعة
- 04 aria-current سمة العنصر الحالي
- سمة إتاحة قياسية يضبطها NavLink على القيمة page لإعلام مستخدمي قارئات الشاشة بالصفحة النشطة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 ARIA ARIA
- Accessible Rich Internet Applications
- مواصفات سمات الوصول القياسية التي تجعل عناصر تطبيقات الويب التفاعلية واضحة للتقنيات المساندة.
- للمراجعة
- 02 CTA CTA
- Call To Action
- زر أو رابط بارز يوجه المستخدم للخطوة التالية في الواجهة ويُبنى داخلياً بمكون Link.
- للمراجعة
- 03 HTML HTML
- HyperText Markup Language
- لغة هيكلة صفحات الويب التي يترجم إليها مكونا Link وNavLink في صورة وسم رابط دلالي قياسي.
- للمراجعة
- 04 CSS CSS
- Cascading Style Sheets
- أوراق التنسيق المستخدمة لإبراز التبويب النشط عبر الصنف active أو محدد سمة الوصول.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال المتجر في محرر التجريب وأضف 3 دورات ثم انتقل لصفحة الدفع وعد عبر Link للتأكد من بقاء العداد محفوظاً عند 4.
-
في مثال تبويبات اللوحة، احذف خاصية end مؤقتاً من رابط الملخص أثناء فتح /dashboard/billing لملاحظة إضاءة الرابطين معاً ثم أعدها.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي10 أسئلة تنتظرك ＋
لماذا يُفضل استخدام <Link to="/about"> بدلاً من <a href="/about"> للتنقل الداخلي في التطبيق؟
يمنع مكون Link إعادة تحميل المستند بالكامل فيحافظ على حالة React وسرعة الانتقال.
ما عنصر DOM الحقيقي الذي يُنتجه مكون <Link to="/courses"> في المتصفح؟
يرسم مكون Link عنصر <a href="/courses"> دلالياً قياسياً يدعم لوحة المفاتيح وقارئات الشاشة.
ما صنف CSS الافتراضي الذي يضيفه مكون <NavLink> تلقائياً عند تطابق وجهته مع العنوان الحالي؟
يضيف NavLink افتراضياً الصنف النصي active إلى العنصر المطابق.
ما الخاصية المنطقية التي يمررها NavLink لدالة خاصية className لمعرفة حالة التطابق؟
يمرر NavLink كائناً يحتوي على القيمة المنطقية isActive لتحديد التنسيق النشط.
لماذا نضيف خاصية end إلى <NavLink to="/dashboard" end> عند وجود روابط فرعية مثل /dashboard/billing؟
تمنع خاصية end بقاء رابط اللوحة الأب نشطاً ومضاءً عند فتح المسارات الفرعية التابعة له.
ما سمة الوصول القياسية التي يضيفها <NavLink> تلقائياً على الرابط النشط لدعم قارئات الشاشة؟
يضبط NavLink السمة aria-current="page" تلقائياً على عنصر الرابط المطابق للصفحة المفتوحة.
يظل الضغط على Ctrl مع النقر على مكون <Link> يفتح الرابط في تبويب متصفح جديد بشكل طبيعي.
صواب؛ يتجاهل Link اعتراض النقرات المصحوبة بمفاتيح الاختصار ليسمح بالفتح في تبويب جديد.
ما العنصر الصحيح للربط بموقع توثيق خارجي مستقل مثل https://react.dev؟
تقع المواقع الخارجية خارج نطاق توجيه التطبيق، لذا نستخدم معها وسم الرابط القياسي <a href="...">.
يمنح وضع حدث onClick على وسم <div> عادي نفس دعم لوحة المفاتيح ومعاينة الرابط ودلالات الوصول التي يوفرها <Link>.
خطأ؛ عنصر div لا يقبل التركيز بلوحة المفاتيح افتراضياً ولا تتعرف عليه قارئات الشاشة كرابط.
متى يُفضل اختيار مكون <Link> بدلاً من <NavLink> داخل صفحات التطبيق؟
يُستخدم Link في البطاقات والشعارات وأزرار الانتقال التي لا تحتاج إبراز حالة تبويب نشط.