مسیریابی چگونگی حرکت در صفحات وب سایت را تعیین می‌نماید، ابتدای مسیر صفحات را بسته به پروژه‌ی در حال انجام، می‌توان صفحه Index و یا در طراحی بخش مدیریت سایت صفحه Dashboard قرار داد. در زیر چند مثال از نحوه نمایش مسیر صفحات می‌آوریم:
- نمایش لیست: به عنوان مثال می‌خواهیم لیست کتاب‌های وب سایت را نمایش دهیم مسیر صفحات را به شکل زیر می آوریم:
Domainname.com/books
- نمایش جزئیات: به عنوان مثال می‌خواهیم جزئیات یک کتاب را نمایش دهیم:
Domainname.com/books/{id}
- ساخت یا تغییر: به عنوان مثال در بخش مدیریت می‌خواهیم یک کتاب اضافه یا ویرایش نماییم:
Domainname.com/books/create
Domainname.com/books/edit/{id}
مثال‌های بالا از نمونه‌های پر کاربرد در مسیریابی می‌باشند که در پروژه‌های بزرگ هم امتحان خود را پس داده اند.
چرا Routing از در React استفاده می‌کنیم ؟
ایده اصلیSPA ( اپلیکیشن‌های تک صفحه ای) این است که شما می توانید فقط در یک صفحه و فقط با یک تماس به سرور ، بدون تغییر آدرس، یا حداقل بدون استفاده از یک صفحه جدید، یک برنامه کاربردی کامل داشته باشید. در این میان شما باید یک Component جادویی داشته باشید که تصمیم بگیرد. کدام یک از بی نهایت Component شما اجرا شود.
این Component جادویی Router نام دارد.
به عنوان مثال وقتی در صفحه لیست کتاب‌ها هستید، برای دیدن جزئیات یک کتاب لازم نیست کل صفحه دوباره بارگزاری شود،تنها کافیست Component مربوط به جزئیات کتاب با Component لیست کتاب جایگزین شود، Router این کار را برای شما انجام می‌دهد.
Router چه ویژگی‌هایی دارد:
- تغییر یک Component به جای بارگزاری مجدد صفحه
- جابه جایی بین صفحات
- مرتب سازی URL
- ذخیره State صفحه قبلی جهت بازگشت به آن صفحه
چگونه از Router در React استفاده کنیم؟
همانطور که می‌دانید مسیریابی یکی از مهمترین بخشهای توسعه پروژه است. پیمایش در سایت هویت سایت را نمایش می‌دهد، به همین دلیل مسیریابی باید طبیعی، شهودی و مطابق با بیزینس مدل باشد.
برای استفاده از Router در React چندین راه وجود دارد در صورتی که از نسخه‌های ابتدایی React استفاده می‌کنید، تقریبا تنها یک راه دارید، آن هم استفاده از Router موجود در کتابخانه React می‌باشد. اما در صورتی که از نسخه های جدیدتر استفاده می‌نمایید، میتوانید از کتابخانههای دیگر استفاده نمایید، همچنین در صورتی که پروژه شما شکل خاصی از مسیریابی را دارد، میتوانید یک Router توسعه دهید.
در وب سایت React لیستی از کتابخانه‌هایی که از آنها می‌توان استفاده نمود با توضیحی کوچک آمده است.
اما در بیشتر آموزش‌های آنلاین و مقالات به استفاده از کتابخانه React Router توصیه شده است.
چرا توصیه می‌شود از React Router استفاده شود:
- قدیمی بودن و رسیدن به نسخه Stable ( در حال حاضر نسخه 5.1.2)
- به روز رسانی جدید همراه با بروز رسانی‌های React
- داشتن بیشترین star در Github
- داشتن Document خوب و جامع
- وجود آموزشها و مقالات زیاد
- هماهنگی با کتابخانه Redux
در میان کتابخانههای Routing جدید نیز کتاب خانه Reach Router بسیار قابل توجه قرار گرفته است.
لیست پیشنهادی React:
https://reactjs.org/community/routing.html
سایت React Router:
https://reacttraining.com/react-router/web/guides/quick-start