المسار الافتراضي بخاصية index | المسارات المتداخلة والتخطيطات المشتركة عبر Outlet

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

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

ماذا يعرض منفذ <Outlet /> عندما يفتح الزائر عنوان الأب مباشرة مثل /dashboard دون مقطع إضافي؟ إذا لم نحدد ابناً افتراضياً، سيبقى المنفذ فارغاً تماماً.

نعالج ذلك بتعريف مسار افتراضي عبر الخاصية المنطقية index دون كتابة خاصية path هكذا: <Route index element={<Overview />} />، ليمتلئ المنفذ تلقائياً بملخص اللوحة فور فتح عنوان الأب.

الصف 2 صورة توضيحية

مخطط شجري يوضح مسار التخطيط الأب مع منفذ Outlet وتفرعه إلى المسار الافتراضي index والمسارات الفرعية النسبية وسياق البيانات المشترك

الصف 3 كود برمجي

HTML

<Route path="/dashboard" element={<DashboardLayout />}>
  <Route index element={<OverviewCards />} />
  <Route path="analytics" element={<Analytics />} />
  <Route path="settings" element={<SettingsForm />} />
</Route>

جرّب بنفسك

الصف 4 ملاحظة هامة

Default Child Index Routes المسار الافتراضي بخاصية index

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

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