Nested Routes المسارات المتداخلة

آخر تحديث: 2026-11-03

Nested Routes المسارات المتداخلة

تُعبّر المسارات المتداخلة عن «تخطيط + صفحات فرعية» كعنصري Route أب وابن: يحتوي Route أب على مسارات أخرى، ويرسم المكوّن الأب «حفرة» Outlet تُرسم فيها الصفحة الفرعية المطابقة. ويُبنى تخطيط لوحة الإدارة الكلاسيكي — بشريط جانبي ثابت ومنطقة محتوى متغيّرة — بالكامل على هذا النمط. ويحتفظ كل مستوى بإطاره الخاص، فتبقى حتى شجرة تخطيطات عميقة سهلة الفهم.

ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.

📝 الصيغة

import { Routes, Route, Outlet } from 'react-router-dom'

function DashboardLayout() {
  return (
    <div>
      <aside>Sidebar (fixed by the parent)</aside>
      <main><Outlet /></main>   {/* the child route renders here */}
    </div>
  )
}

<Route path="dashboard" element={<DashboardLayout />}>
  <Route index element={<Overview />} />   {/* the default child page of /dashboard */}
  <Route path="team" element={<Team />} /> {/* /dashboard/team */}
</Route>

⚙️ المعاملات

القيمة المرجعة：لا شيء (مكوّن تصريحي). يرسم الأب عنصره، وموضع Outlet داخله يقرّر أين يظهر محتوى الابن.

▶ مثال

المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.

الناتج：

يبقى الإطار الخارجي والعنوان (تخطيط الأب) كما هما، بينما يتبدّل الصندوق المتقطّع (موضع Outlet) بالصفحات الفرعية عند النقر — نتيجة رسم المسارات الأب/الابن المتداخلة مع Outlet (عرض توضيحي محاكى).

💡 النقاط الأساسية

🏷️ المزيد من التوجيه والحالة

💡 حالات ذات صلة

📚 دروس ذات صلة

❓ الأسئلة الشائعة

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن