اذهب إلى المحتوى
  • 0

كيفية التعامل مع route له مستويات كثيرة في react

Rayden Storm

السؤال

مرحبا لدي route بهذه الطريقة 

const ROUTES = [

  {
    path: '/Prospection',
    key: 'Prospection',
    component: RenderRoutes,
    routes: [
      {
        path: '/Prospection/OfferEmploi',
        key: "Offre d'emploi",
        exact: true,
        parent: 'Prospection',
        breadcrumbName: "offre d'emploi",
        component: () => <OfferEmploi />,
      },
      {
        path: '/Prospection/ConsulterOfferEmploi',
        key: "Consulter une offre d'emploi ",
        exact: true,
        parent: 'Prospection',
        breadcrumbName: "consulter une offre d'emploi ",
        component: () => <ConsulterOfferEmploi />,
      },
    ],
  },

  {
    path: '/Configuration',
    key: 'Configuration',
    nosidebar: false,

    component: RenderRoutes,
    routes: [
      {
        path: '/Configuration/Administration',
        key: 'Administration',
        exact: true,
        parent: 'Configuration',
        breadcrumbName: 'Administration',
        component: RenderRoutes,
        routes: [
          {
            path: '/Configuration/Administration/Utilisateurs',
            key: 'Comptes Utilisateurs',
            parent: 'Configuration',
            breadcrumbName: 'Comptes Utilisateurs',
            // exact: true,
            component: () => <Utilisateurs />,
          },
          {
            path: '/Configuration/Administration/Profils',
            key: 'Rôles',
            parent: 'Configuration',
            breadcrumbName: 'Rôles',
            exact: true,
            component: () => <Profiles />,
          },
          {
            path: '/Configuration/Administration/Fonctionnalites',
            key: 'Fonctionnalités',
            parent: 'Configuration',
            breadcrumbName: 'Fonctionnalités',
            exact: true,
            component: () => <Features />,
          },
        ],
      },
      {
        path: '/Configuration/référentiel',
        key: 'Référentiel',
        parent: 'Configuration',
        exact: true,
        breadcrumbName: 'Admin',
        component: RenderRoutes,
        routes: [
          {
            path: '/Configuration/référentiel/Activite',
            key: 'Activités',
            parent: 'Configuration',
            breadcrumbName: 'Activités',
            exact: true,
            component: () => <Activites />,
          },
          {
            path: '/Configuration/référentiel/Caneaux',
            key: 'Canaux de recrutement',
            parent: 'Configuration',
            breadcrumbName: 'Canaux de recrutement',
            exact: true,
            component: () => <Caneaux />,
          },
         

      
        ],
      },
    ],
  },
];

export default ROUTES;

الفكرة الأولى التي أتتني هي الدوران حوله ب map ثم ارجاع routes على حسب المعامل لكن التحقق صعب لأنه عندما اجد ان هناك مستوى داخلي يجب أن أدور ب map مجددا هل يمكنكم مساعدتي ؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

يمكنك إستخدام الريكيرجن و هو مبدأ ايضا يعادل looping  او الدوران لكن بطرقة ممكن اكثر نوعية حيث أن شرط التوقف لا يعتمد على عدد النود او الرؤوس بل يعتمد على مثلا إن لم يتبقى تفرعات, أو أن محتوى  هذه القيمة null اي غير موجوده هنا مثال بسيط عليها و يمكنك أن تستحدم شئ موازي لها و الأفضل استعمال الdebugger لفهم اكثر كيف يكون الأستدعاء فالحالة هنا ان الداية نفسها تستدعي نفسي طالما ان الشرط الدخلي للخروج لم يتحقق كالتالي

// هنا نقوم بخلق دالة 
function countDown(fromNumber) {
  // هنا نقوم بوضع شرط التوقف و يمكن ان يكون اي شيء بحسب الحالة التي تريدها 
  if(fromNumber===0)return ;
  //نفوم هنا بطباعة الرقم 
  console.log(fromNumber);
  // اهم نقطة نقوم بإستدعاء الدالة مرة أخرى على قيمة جديدة و التي هي الرقم -1 فنمرر هنا قيمة جديدة لدالة جديدة 
    countDown(fromNumber-1);
}

countDown(3);

للعلم إن إستعمال الريكيرجن يقوم على إستدعاء الدالة أكثر من مرة و لكن كل دالة تحتوي على قيم لا علاقة لها بالدالة السابقة , يمكنك تخيل الموضوع انك كل مرة ترسم مربع له نفس الخصائص و لكنك تقوم بعمل نسخ منه و تخصيصه اي المدخلات و المخرجات مختلفة لكل مربع 

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...