في React، تسمح لك المسارات المتداخلة ببناء مساراتك بشكل هرمي، حيث يتداخل مسار واحد داخل مسار آخر. يعد هذا مفيدًا عند إنشاء واجهات مستخدم معقدة حيث تتم مشاركة مكونات أو صفحات معينة عبر مسارات مختلفة.

لإنشاء مسارات متداخلة، يمكنك استخدام React Router، وهي مكتبة شائعة للتعامل مع التوجيه في تطبيقات React.

مثال باستخدام React Router (الإصدار 6):

1. تثبيت جهاز التوجيه React:

   npm install react-router-dom

1. إعداد المسارات المتداخلة:

   import { BrowserRouter as Router, Routes, Route, Outlet, Link } from 'react-router-dom';

   // Layout Component with Nested Routes
   function Layout() {
     return (
       

         

         {/* This is where nested routes will be rendered */}
         
     );
   }

   // Components for each route
   function Home() {
     return 
Home Page
;
   }

   function About() {
     return 
About Page
;
   }

   function Dashboard() {
     return (
       

         
Dashboard
         

         {/* Nested routes inside Dashboard */}
         
     );
   }

   function Stats() {
     return 
Dashboard Stats
;
   }

   function Settings() {
     return 
Dashboard Settings
;
   }

   // App Component with Routes
   function App() {
     return (
       }>
             } />
             } />
             }>
               } />
               } />
             
           
         
     );
   }

   export default App;

النقاط الرئيسية:

• المنفذ: هذا هو المكان الذي يتم فيه عرض مكونات المسار المتداخلة.
• Route path="/" element={}: الطريق الرئيسي مع العناصر الفرعية المتداخلة.
• المسار المتداخل: يحتوي العنصر }> على مسارات متداخلة إضافية لـ "الإحصائيات" و"الإعدادات."

تسمح لك هذه البنية بالحصول على تخطيط مشترك (مثل قائمة لوحة المعلومات) وتحميل أقسام محددة ديناميكيًا مثل الإحصائيات أو الإعدادات بناءً على المسارات المتداخلة.