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

السؤال

Recommended Posts

  • 1
نشر

مرحباً بك: 
لكي تفهم الفرق يجب استخدام مثال أوضح مثل 
 

<Route path="/school" component={School} />
<Route path="/school/rooms" component={Rooms} />
  1. بدون exact: عندما تكتب في المتصفح url/school سيقوم الراوتر بالبحث في قائمة ال routes لديك وإرجاع أول قيمة يجدها وهي أول route في المثال السابق وهذا جيد . لكن المشكلة ستظهر عندما تريد الذهب ل url/school/rooms سيبدأ الراوتر بالبحث وأيضاً سيقوم بإعادة أول قيمة يجدها وهي أول route في المثال السابق ( وهذا خطأ المفترض أن يرجع ثاني route ) وهذا بسبب المطابقة الجزئية في react router أي أن school جزء من school/rooms
  2. باستخدام exact: سيتأكد الراوتر من أن الصفحة التي تم تحميلها هي الصفحة التي لها نفس الرابط كما في الأمثلة السابقة ولن يعتمد المطابقة الجزئية
  • 0
نشر

لنفترض أن الموقع الخاص بك يحتوي على التوجيهين التاليين،

  • Home/
  • /

و أنك لم تستخدم exact مع التوجيه، لنتوجه إلى المتصفح و نقوم بتجربة فتح 

/localhost:3000

و

localhost:3000/Home

ما سيحدث أنه في كلا المرتين سيتم فتح الصفحة ذات التوجيه / و هذا لأن react تقوم بمقارنة التوجيه الذي تمت كتابته في المتصفح مع التوجيهات المعرفة في التطبيق حرفًا بحرف و بمجرد أن تجد تطابق تتوقف. أي أنها ستقوم بمقارنة Home/ مع التوجيهات و ستجد أن / الموجودة في بداية التوجيه Home/ موجودة في التوجيه / لذلك ستقوم بعرض هذه الصفحة و ستتوقف عن مقارنة التوجيهات مع التوجيه الذي تم إدخاله في المتصفح.

أمّا في حالة استخدام exact فإننا في هذه الحالة نجبر react على مقارنة التوجيهات بصورة كاملة و ليس جزئية.

أي أننا نخبرها أن تقوم بفتح الصفحة ذات التوجيه / عندما يقوم المستخدم بكتابة التوجيه / بالضبط دون زيادة أو نقصان عليه، و أن تقوم بفتح الصفحة Home/ عندما يكتب المستخدم التوجيه Home/ بالضبط

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...