المسارات المتداخلة مع React Router v4/v5

تسمح لك المسارات المتداخلة بإنشاء هيكل هرمي للتنقل داخل تطبيق React الخاص بك. في React Router v4 وv5، يمكنك تحقيق ذلك باستخدام مكونات و.

مثال

فكر في المثال التالي، حيث نريد تقسيم تطبيقنا إلى واجهة أمامية والمناطق الإدارية.

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

الاعتبارات

في React Router v4، لا تقوم بتداخل مكونات . بدلاً من ذلك، يمكنك وضعها داخل آخر. على سبيل المثال:

يجب أن يصبح:

وسيتم تعريف مكون المواضيع على النحو التالي:

const Topics = ({ match }) => (
  

    
Topics
    
      Example topic
    
    
);

تتيح هذه البنية مزيدًا من المرونة والتحكم في توجيه التطبيق الخاص بك.