آموزش کامل React-Router 4 به همراه مثالهای کاربردی - قسمت 1 - Basic routing



visibility  
mode_comment   ۰

در این مطلب قصد داریم در مورد ابزار React-Router 4 توضیحاتی رو در اختیارتون قرار بدیم و شما رو با اون آشنا کنم و با استفاده از مثالهای کاربردی متنوع، نحوه استفاده از اون رو بهتون آموزش بدم.

همونطور که میدونین Routing یا مسیردهی یکی از مهمترین مواردی هست که تقریبا همه اپلیکیشنها از اون استفاده میکنند و با استفاده از اون به کاربران اجازه میدن که بین صفحات مختلف Navigate کنند و جابجا بشن.

هر چه اپلیکیشن بزرگتر میشه، تنظیمات مربوط به Routing هم پیچیده‌تر میشه و میتونه از یک Route ساده به یک Route تودرتو چند‌سطحی تبدیل بشه.

معروف‌ترین و متداول‌ترین کتابخانه‌ای که در برنامه‌های React برای Routing مورد استفاده قرار میگیره، React-Router است. با استفاده از React-Router به راحتی میتونین بین view ها جابجا بشید و بین اونا transition تعریف کنید و به راحتی به اطلاعات URL دسترسی داشته باشید و ...

قبل از نسخه 4 مربوط به کتابخانه React-Router باید همه مسیرها رو قبل از رندر شدن صفحه و در زمان initialize شدن اپلیکیشن، در یک فایل مشخص تعریف میکردیم. با استفاده از React-Router 4 میتونین مسیرها رو بصورت declarative یا تعریفی مشخص کنید. React-Router بصورت component در دسترس شما قرار داده شده و به راحتی میتونین از اون در برنامه‌های React استفاده کنید.

نصب و راه‌اندازی React-Router

در این مطلب برای کار با React-Router به موارد زیر احتیاج داریم:

  • به Nodejs نسخه 6 به بالا و npm
  • ابزار create-react-app برای راه‌اندازی پروژه React

React-Router ترکیبی از بسته‌های زیر هست و از اونا تشکیل شده است:

  • react-router : شامل component های اصلی و core هست
  • react-router-dom : شامل API‌هایی هست که در مرورگر به اونا احتیاج دارید
  • react-router-native : شامل API‌هایی هست که در اپلیکیشن‌های موبایل به اونا احتیاج دارید

command line رو باز کرده و به مسیر مورد نظرتون برید و دستور create-react-app router-example رو اجرا کنید تا پروژه react با این نام ساخته بشه. بعد از نصب dependency ها توسط npm وارد مسیر router-example بشید و دستور زیر رو برای نصب ابزار react-router-dom اجرا کنید:

موارد تحت پوشش این مطلب

در این مقاله در مورد استفاده از React-Router در مرورگر آموزش میدیم و موارد زیر رو تحت پوشش قرار میدیم:

  • مسیردهی ساده یا Basic routing
  • Routing تودرتو و پارامترهای URL
  • نحوه احراز هویت برای یک مسیر
  • سفارشی کردن کامپوننت Link
  • مدیریت مسیرهای ناموجود
  • رندر کردن Sidebar

خب حالا یکی یکی موارد بالا رو بررسی میکنیم.

مسیردهی ساده یا Basic routing

2 کامپوننت BrowserRouter و HasRouter برای Router وجود داره که میتونین از اونا برای Web application ها استفاده کنید. مورد اول URL بدون # و مورد دوم URL با # یا Hash رو در اختیارتون قرار میده.

اگر قصد دارید که اپلیکیشنی که شما میسازید در مرورگرهای legacy هم پشتیبانی بشه، پیشنهاد میشه که از HashRouter استفاده کنید.

خب حالا کدهای زیر رو درون فایل index.js در دایرکتوری src قرار بدین:

همونطور که میبینید کامپوننت‌های BrowserRouter و Link و Route رو از ابزار react-router-dom وارد پروژه کردیم. با استفاده از کلمه کلیدی as برای کامپوننت BrowserRouter یک نام مستعار به نام Router قرار دادیم. همونطور که میبینید کامپوننت App که ریشه سایت هست رو درون Router قرار دادیم.

این اولین قدم در مسیردهی Application هست. همونطور که میبینید Router به عنوان یک Container برای Component های دیگه هست و باید دقت داشته باشید که فقط یک Component رو به عنوان فرزند اون قرار بدین. در کدهای بالا کامپوننت App رو به عنوان فرزند اون قرار دادیم.

حالا ممکنه سوال بپرسید که چطور میتونیم مسیر یا Route های مورد نظرمون رو تعریف کنیم؟ برای اینکار فایل App.js در دایرکتوری src رو باز کنید و کدهای زیر رو در اون قرار بدین:

همونطور که در کدهای بالا میبینید یک لیست از لینک داریم که به مسیرهای / و /airports و /cities لینک داده شده‌اند و این کار با استفاده از کامپوننت Link مربوط به react-router-dom صورت گرفته.

هر کدام از این لینکها به یک مسیر خاص اشاره میکنند و باید برای هر کدام Component مربوط به همون مسیر رندر بشه. همونطور که میبینید 3 Route رو تعریف کردیم و Component های مورد نظرمون رو به path یا مسیرهای دلخواه نسبت دادیم. مثلا با کاری که در کد بالا کردیم، کامپوننت City در مسیر /cities رندر میشه و لیست شهرها رو به ما نشون میده.

حالا اگر دستور npm start رو بزنید تا بتونین خروجی رو در مرورگر مشاهده کنید، میبینید که همه چیز کار میکنه و با کلیک کردن بر روی لینکها، آدرس مرورگر عوض میشه و Component مورد نظر نیز رندر میشه.

یک مشکل که در کد بالا وجود داره اینه که کامپوننت Home در همه مسیرها رندر میشه و همونطور که در تصویر بالا میبینید در مسیر airports نیز رندر شده است اما ما میخوایم که Home فقط در مسیر / رندر بشه. مسیر / که برای کامپوننت Home تعریف کردیم، با مسیرهای /cities و /airports مطابقت داره و match هست و به همین خاطر هست که Home در همه مسیرها رندر میشه.

این مشکل به سادگی حل میشه و کافی هست که برای مسیر / یک ویژگی بنام exact قرار بدین و با این ویژگی مشخص میکنید که این Component فقط در همین مسیر رندر بشه. برای حل این مشکل بصورت زیر عمل میکنیم:

حالا اگر مجددا خروجی رو ببینیم و وارد مسیر /airports بشیم، خروجی بصورت زیر خواهد بود:

در همه مثالهای بالا همه Route ها یک ویژگی بنام component دارند که زمانی که مسیر اونا با مسیر مرورگر match میشه، اون رو رندر میکنند. اگر شما بخواید بجای قرار دادن یک Component فقط یک تابع کوچک رو فراخوانی کنید و خروجی اون در مسیر مورد نظر نمایش داده بشه، میتونین از ویژگی render یا render props استفاده کنید و تابع مورد نظرتون رو به اون پاس بدین. مثال زیر رو در نظر بگیرید:

با اینکار زمانی که وارد مسیر /airports بشیم، متن مورد نظر نمایش داده میشه.

همونطور که دیدید به سادگی مسیرهای ساده رو به وجود آوردیم و Component های مورد نظر رو در مسیر دلخواه رندر کردیم.

در قسمت بعد اطلاعات بیشتری در مورد React-Router در اختیارتون قرار میدیم و بقیه موارد رو بهتون آموزش میدم.

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back
7Learn Experts
comment دیدگاه کاربران

add_circle ارسال دیدگاه

خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :