...

/

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

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

تعرف على كيفية تحديد المسارات المتداخلة وتقديمها باستخدام مكون Outlet.

سنغطي ما يلي...

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

بدلاً من تعريف كل قسم من هذه الأقسام الفرعية كمسارات مستقلة، تسمح لنا المسارات المتداخلة بتنظيمها تحت مسار رئيسي واحد مثل/dashboard يُعد هيكل مسارات الوالد والطفل هذا مفيدًا للتطبيقات التي تحتوي بعض الصفحات أو الأقسام على صفحات فرعية خاصة بها. باستخدام المسارات المتداخلة، يُمكننا بناء تطبيقات قابلة للتطوير ومتعددة الوحدات مع الحفاظ على تجربة مستخدم متسقة.

لوحة معلومات مع مسارات منفصلة

فيما يلي مثال على لوحة معلومات تحتوي على مسارات منفصلة للملف الشخصي والإعدادات والإشعارات:

فيApp.js :

  • السطران ١٢-١٣: حدّد شريط تنقل علويًا يحتوي على روابط للصفحة الرئيسية ولوحة المعلومات. تتيح هذه الروابط للمستخدمين التنقل بين صفحتي الصفحة الرئيسية ولوحة المعلومات.

  • السطر 17: حدد/dashboard المسار كمسار رئيسي يعرض ...