شرح صفوف ومحتوى الفقرة
تجمع التطبيقات الاحترافية عدة قوالب تخطيط مستقلة داخل شجرة <Routes> واحدة بنظافة تامة؛ كقالب عام يحيط بصفحات الزوار مثل الرئيسية والأسعار، وقالب لوحة تحكم مستقل يحيط بمسارات /dashboard الفرعية. يلخص الجدول التالي لبنات التداخل المعمارية:
| أداة التداخل | الصياغة في JSX | الدور المعماري في التخطيط |
|---|---|---|
| مسار التخطيط الأب | <Route path="/app" element={<Shell />}> | يثبّت القائمة المشتركة والحالة أثناء التنقل بين الصفحات الفرعية |
| منفذ العرض الفرعي | <Outlet /> | يرسم مكون المسار الابن النشط في موضعه المحدد داخل القالب |
| المسار الافتراضي | <Route index element={<Home />} /> | يمثل الشاشة الفرعية التلقائية عند زيارة عنوان الأب مباشرة |
| سياق المنفذ المشترك | useOutletContext() | ينقل بيانات القالب الأب إلى الشاشات الفرعية دون تكرار |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
صممت في هذا الدرس قوالب التخطيط المستمرة عبر المسارات المتداخلة، وعرضت الشاشات الفرعية داخل منفذ Outlet، وضبطت المسار الافتراضي بخاصية index والروابط النسبية، وشاركت بيانات التخطيط عبر خطاف useOutletContext. الخطوة التالية: انتقل الآن إلى الدرس رقم 51 «التنقل البرمجي وصفحة عدم العثور والمسارات المحمية» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.