الفرق بين Route يحتوي على exact و Route بدونها

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

• Home/
• /

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

/localhost:3000

و

localhost:3000/Home

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

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

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

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

<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: سيتأكد الراوتر من أن الصفحة التي تم تحميلها هي الصفحة التي لها نفس الرابط كما في الأمثلة السابقة ولن يعتمد المطابقة الجزئية