اخبار، مطالب، رویدادهای خدمات و توسعه طراحی سایت رادکام

مسیریابی در React

مسیریابی چگونگی حرکت در صفحات وب سایت را تعیین می‌نماید، ابتدای مسیر صفحات را بسته به پروژه‌ی در حال انجام، می‌توان صفحه 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  نام دارد.

React Routing

 

به عنوان مثال وقتی در صفحه لیست کتاب‌ها هستید، برای دیدن جزئیات یک کتاب لازم نیست کل صفحه دوباره بارگزاری شود،تنها کافیست 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



نام را وارد کنید
تعداد کاراکتر باقیمانده: 1000
نظر خود را وارد کنید