المسارات المتداخلة
تعرف على كيفية تحديد المسارات المتداخلة وتقديمها باستخدام مكون Outlet.
سنغطي ما يلي...
مع ازدياد تعقيد التطبيقات وكثرة ميزاتها، يصبح تنظيم المسارات بوضوح وسهولة الصيانة أمرًا بالغ الأهمية. غالبًا ما نجد أن بعض أقسام التطبيق مُجمّعة منطقيًا ضمن مسار رئيسي. ومن الأمثلة الرائعة على ذلك "لوحة التحكم" في تطبيقات الويب. تتكون لوحات التحكم عادةً من عدة أقسام فرعية ذات صلة، مثل "الملف الشخصي" و"الإعدادات" و"الإشعارات"، والتي تندرج جميعها تحت مظلة صفحة لوحة التحكم الرئيسية.
بدلاً من تعريف كل قسم من هذه الأقسام الفرعية كمسارات مستقلة، تتيح لنا المسارات المتداخلة تنظيمها ضمن مسار رئيسي واحد مثل /dashboard
. يُعد هيكل المسارات الرئيسي والفرعي هذا مفيدًا للتطبيقات التي تحتوي بعض الصفحات أو الأقسام على صفحات فرعية خاصة بها. باستخدام المسارات المتداخلة، يمكننا بناء تطبيقات قابلة للتطوير ومتعددة الوحدات مع الحفاظ على تجربة مستخدم متسقة.
لوحة معلومات مع مسارات منفصلة
فيما يلي مثال على لوحة معلومات تحتوي على مسارات منفصلة للملف الشخصي والإعدادات والإشعارات:
في App.js
:
السطران ١٢-١٣: حدّد شريط تنقل علويًا يحتوي على روابط للصفحة الرئيسية ولوحة المعلومات. تتيح هذه الروابط للمستخدمين التنقل بين صفحتي الصفحة الرئيسية ولوحة المعلومات.
السطر 17: قم بتعريف مسار
/dashboard
كمسار رئيسي يقوم بعرض مكون ...