في هذا الدرس 6تصفّح المواضيع
لتحديد الموضع الدقيق الذي ستظهر فيه الشاشة الفرعية داخل قالب التخطيط الأب، نضع مكون <Outlet /> المستورد من react-router-dom. يعمل <Outlet /> كمنفذ ديناميكي ذكي يستبدل نفسه تلقائياً بمكون المسار الابن المطابق للعنوان الحالي.
function WorkspaceLayout() {
return (
<div className="workspace">
<WorkspaceNav />
<main>
<Outlet />
</main>
</div>
);
}ماذا يعرض منفذ <Outlet /> عندما يفتح الزائر عنوان الأب مباشرة مثل /dashboard دون مقطع إضافي؟ إذا لم نحدد ابناً افتراضياً، سيبقى المنفذ فارغاً تماماً.
نعالج ذلك بتعريف مسار افتراضي عبر الخاصية المنطقية index دون كتابة خاصية path هكذا: <Route index element={<Overview />} />، ليمتلئ المنفذ تلقائياً بملخص اللوحة فور فتح عنوان الأب.
<Route path="/dashboard" element={<DashboardLayout />}>
<Route index element={<OverviewCards />} />
<Route path="analytics" element={<Analytics />} />
<Route path="settings" element={<SettingsForm />} />
</Route>داخل المسارات المتداخلة ومكونات التخطيط، تُعامل المسارات والروابط التي لا تبدأ بشرطة مائلة / بوصفها روابط نسبية تُبنى تلقائياً فوق مسار الأب الحالي:
- الرابط النسبي: داخل
/account، يتحول<NavLink to="billing">تلقائياً إلى/account/billing، حتى لو غيّرت اسم مسار الأب لاحقاً. - الرابط المطلق: البادئ بشرطة
/مثل<Link to="/">ينتقل مباشرة من جذر الموقع بغض النظر عن عمق التداخل.
function AccountLayout() {
return (
<div>
<nav className="rx-nav">
<NavLink to="" end>Profile</NavLink>
<NavLink to="security">Security</NavLink>
<Link to="/">Exit to Home</Link>
</nav>
<Outlet />
</div>
);
}كثيراً ما يمتلك قالب التخطيط الأب بيانات أو دوال مشتركة تحتاجها مساراته الفرعية المباشرة، مثل باقة الاشتراك الحالية أو زر تبديل العرض. بدلاً من إنشاء ملف سياق عام كامل من أجل تخطيط واحد، مرر القيمة مباشرة عبر خاصية <Outlet context={value} /> في الأب، واقرأها داخل أي مسار فرعي بخطاف useOutletContext().
تجمع التطبيقات الاحترافية عدة قوالب تخطيط مستقلة داخل شجرة <Routes> واحدة بنظافة تامة؛ كقالب عام يحيط بصفحات الزوار مثل الرئيسية والأسعار، وقالب لوحة تحكم مستقل يحيط بمسارات /dashboard الفرعية. يلخص الجدول التالي لبنات التداخل المعمارية:
| أداة التداخل | الصياغة في JSX | الدور المعماري في التخطيط |
|---|---|---|
| مسار التخطيط الأب | <Route path="/app" element={<Shell />}> | يثبّت القائمة المشتركة والحالة أثناء التنقل بين الصفحات الفرعية |
| منفذ العرض الفرعي | <Outlet /> | يرسم مكون المسار الابن النشط في موضعه المحدد داخل القالب |
| المسار الافتراضي | <Route index element={<Home />} /> | يمثل الشاشة الفرعية التلقائية عند زيارة عنوان الأب مباشرة |
| سياق المنفذ المشترك | useOutletContext() | ينقل بيانات القالب الأب إلى الشاشات الفرعية دون تكرار |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
صممت في هذا الدرس قوالب التخطيط المستمرة عبر المسارات المتداخلة، وعرضت الشاشات الفرعية داخل منفذ Outlet، وضبطت المسار الافتراضي بخاصية index والروابط النسبية، وشاركت بيانات التخطيط عبر خطاف useOutletContext. الخطوة التالية: انتقل الآن إلى الدرس رقم 51 «التنقل البرمجي وصفحة عدم العثور والمسارات المحمية» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Layout Route مسار التخطيط المشترك
- مسار أب يرسم الهيكل الثابت المشترك كالشريط العلوي والقائمة الجانبية حول المسارات الفرعية.
- للمراجعة
- 02 Outlet منفذ العرض الفرعي
- مكون يوضع داخل قالب التخطيط الأب ليظهر في مكانه مكون المسار الابن المطابق للعنوان الحالي.
- للمراجعة
- 03 Index Route المسار الفرعي الافتراضي
- مسار ابن يحمل خاصية index بدون مسار فرعي ليملأ منفذ الأب تلقائياً عند فتح عنوان الأب.
- للمراجعة
- 04 useOutletContext خطاف سياق المنفذ
- خطاف يتيح لمكونات المسارات الأبناء قراءة القيم الممررة في خاصية context على منفذ الأب.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 DRY DRY
- Don’t Repeat Yourself
- مبدأ عدم تكرار الشفرة الذي تحققه قوالب التخطيط بكتابة القوائم المشتركة في مكون أب واحد.
- للمراجعة
- 02 UI UI
- User Interface
- التدرج البصري لمناطق الشاشة الذي ينعكس مباشرة في شجرة المسارات المتداخلة.
- للمراجعة
- 03 URL URL
- Uniform Resource Locator
- مقاطع المسار المتدرجة التي يفعّل كل مستوى منها طبقة مقابلة في شجرة التخطيط.
- للمراجعة
- 04 SPA SPA
- Single-Page Application
- تطبيق صفحة واحدة تظل فيه القوالب الخارجية مركبة بالذاكرة بينما تتبدل اللوحات الداخلية عبر المنفذ.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال المسار الافتراضي في محرر التجريب وأضف رابط ومسار reports الفرعي واختبر سلاسة التبديل داخل Outlet.
-
في مثال StudioShell، أضف اسم مساحة العمل داخل كائن context في Outlet واعرضه في مكون UsagePanel الفرعي.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي10 أسئلة تنتظرك ＋
ما المكون الذي يجب وضعه داخل قالب التخطيط الأب كي يظهر مكون المسار الابن المطابق؟
يمثل مكون <Outlet /> المنفذ الذي تُرسم بداخله الشاشة الفرعية النشطة.
عند التنقل بين مسارين فرعيين يشتركان في نفس مسار التخطيط الأب، يظل مكون الأب مركباً ويحتفظ بحالته المحلية.
صواب؛ يتبدل محتوى منفذ Outlet فقط بينما يظل القالب الأب وحالته حيين دون إعادة تركيب.
كيف تعرّف مساراً فرعياً يظهر تلقائياً داخل <Outlet /> عند زيارة عنوان الأب /dashboard مباشرة؟
نستخدم الخاصية المنطقية index دون كتابة path، مثل <Route index element={<Overview />} />.
داخل مكون معروض تحت المسار /account، إلى أي عنوان يشير الرابط النسبي <Link to="billing">؟
بما أن الرابط لا يبدأ بشرطة مائلة، يُبنى نسبياً فوق مسار الأب ليصبح /account/billing.
ما العلامة النحوية التي تميز الرابط المطلق عن الرابط النسبي في خاصية to؟
يبدأ الرابط المطلق بشرطة مائلة أمامية "/" من جذر الموقع، بينما يخلو الرابط النسبي منها.
كيف يمرر قالب التخطيط الأب بيانات مشتركة إلى مكونات المسارات الأبناء عبر Outlet؟
بتمرير البيانات في خاصية <Outlet context={...} /> وقراءتها في الابن عبر خطاف useOutletContext().
يتيح مسار التخطيط الخالي من خاصية path اشتراك عدة صفحات في قالب واحد دون إضافة مقطع زائد لعناوينها.
صواب؛ يغلف القالب الصفحات بصرياً مع بقاء عناوينها مختصرة ونظيفة مثل /pricing و/about.
يُسمح للمسار الافتراضي <Route index /> أن يحتوي بداخله على مسارات أبناء متداخلة أخرى.
خطأ؛ المسار الافتراضي index يمثل ورقة عرض نهائية لمنفذ الأب ولا يقبل مسارات فرعية بداخله.
كيف يجمع تطبيق React واحد بين قالب بسيط للصفحات العامة وقالب ذي قائمة جانبية لمسارات /dashboard/*؟
بتعريف فرعي تخطيط أب مستقلين داخل <Routes>، يضم كل فرع مكون القالب الخاص به ومنفذ <Outlet />.
ماذا يعرض <Outlet /> عند فتح عنوان الأب /dashboard مباشرة في حال عدم تعريف مسار index افتراضي؟
إذا لم يطابق أي مسار ابن ولم يوجد مسار index افتراضي، يعيد المنفذ القيمة null فلا يظهر محتوى فرعي.