تفاوت های نسخه پنجم و ششم React Router Dom

تفاوت های React Router نسخه 6 و نسخه 5: 

کتابخانه React Router  یک کتابخانه Server Side و Client Side است که برای مسیریابی در کتابخانه React استفاده میشود. React Router در جاهای مختلفی استفاده میشود، مثل سمت فرانت، سمت سرور و حتی در React Native.
توی نسخه ششم این کتابخانه تغییرات زیادی در پس زمینه اتفاق افتاده، مثل بهینه سازی الگوریتم های مسیریابی اضافه شدن چندین  Component جدید و همچنین کاهش 58 درصدی سایز باندل.

تو این مقاله تلاش میکنیم تا چند مورد از تغییرات بین نسخه پنجم و ششم این کتابخانه رو ذکر کنیم.

کلمه Switch با Routes جایگزین شد

در نسخه ششم دیگه Switch رو نمیشه از react-router-dom ااکسپرت کرد. در نسخه های قبلی میتونستیم از Switch استفاده کنیم که Route ها رو درونش قرار بدیم. ولی در نسخه ششم به جای Switch از Routes استفاده میکنیم که Route ها رو درونش قرار میدیم.

نحوه تعریف کردن Route تغییر کرده است

کامپوننتی که باید بر اساس یه Route در مسیریابی render شود دیگه نمیتونه به عنوان یک فرزند به Route پاس داده شود و باید به عنوان یک prop با نام element به Route پاس داده شود

دیگه نیازی به کلمه exact نیست

با نسخه ششم React Router دیگه نیازی به کلمه exact نیست. همون طور که در این مقاله ذکر شده، به علت بهینه شدن الگوریتم نسخه ششم router به راحتی میتوانیم یک Component رو در یک مسیر خاص render کنیم بدون اینکه به کلمه exact نیازی داشته باشیم.
در نسخه های قبلی router از بالا به پایین به ترتیب route ها رو چک میکرد ولی در نسخه ششم الگوریتم بهتری برای لود کردن route ها داره و نیازی نیست که نگران ترتیب route ها باشیم چون دیگه ترتیب route ها دیگه مهم نیست.

برای اینکه درک بهتری از سه مبحثی که گفته شد داشته باشید میتونید به تیکه کدهای پایین یه نگاه بندازید.

نسخه پنجم:

نسخه ششم:

دیگه نیازی به نصب react-router-config به صورت جداگانه نیست

کتابخانه react-router-config به ما قابلیت تعریف کردن route ها رو به صورت آبجکت های جاوا اسکریپتی به جای المان های ری اکتی میداد، که تمامی توابع این کتابخانه به هسته نسخه ششم اضافه شده است.

نسخه پنجم:

نسخه ششم:

کلمه useNavigate جایگزین useHistory شده است.

در نسخه ششم router مسیریابی تغییراتی داشته که useHistory در بیشتر جاها جایگزین useHistory شده است.

بعضی از قابلیت های پر استفاده تابع useHistory مثل go, goBack و goForward را هم میتوان با useNavigate پیاده سازی کرد فقط باید به router بگیم که چند مرحله جلو یا عقب بره. که برای جلو رفتن از اعداد مثبت و برای برگشت به عقب از اعداد منفی استفاده میکنیم.

نسخه پنجم : 

نسخه ششم: 

دیگه NavLink هیچ prop ای به عنوان activeClassName و activeStyle نداره

در نسخه های قبلی میتونستیم کلاس یا استایل جداگانه ای به NavLink بدیم زمانی که NavLink مورد نظرمون فعال بود، ولی در نسخه ششم router، این دو prop حذف شده  و برای دستیاب به نتیجه قبلی باید از روشی متفاوت عمل کنیمد.
در نسخه ششم NavLink یک تابع که به ما یک سری اطلاعات میده رو به صورت ورودی میگیره که راحت تر و بهتر استایل ها رو کنترل کنیم.

جایگزینی Redirect با Navigate

در نسخه ششم دیگه Redirect در کتابخانه react-router-dom وحود نداره و به جاش از Navigate استفاده میکنیم.

امیدوارم این مقاله برای استفاده از نسخه ششم react-router-dom بهتون کمک کرده باشه.