انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: المسارات المتداخلة والتخطيطات المشتركة عبر Outlet

Rendering Children with Outlet عرض المسارات الأبناء عبر Outlet

صمّم قوالب تخطيط مشتركة بالمسارات المتداخلة، واعرض الشاشات الفرعية داخل منفذ Outlet مع تحديد المسار الافتراضي index والروابط النسبية ومشاركة بيانات التخطيط عبر useOutletContext.
3 صفوف تعليمية
ReactJS
0 مشاهدة

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

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

لتحديد الموضع الدقيق الذي ستظهر فيه الشاشة الفرعية داخل قالب التخطيط الأب، نضع مكون <Outlet /> المستورد من react-router-dom. يعمل <Outlet /> كمنفذ ديناميكي ذكي يستبدل نفسه تلقائياً بمكون المسار الابن المطابق للعنوان الحالي.

الصف 2 كود برمجي
HTML 
function WorkspaceLayout() {
  return (
    <div className="workspace">
      <WorkspaceNav />
      <main>
        <Outlet />
      </main>
    </div>
  );
}
جرّب بنفسك
الصف 3 معاينة حية

جميع فقرات هذا الدرس (المسارات المتداخلة والتخطيطات المشتركة عبر Outlet)