آموزش Route در React

route-in-react

مقدمه:

خب در ابتدا لازمه عذرخواهی کنم بابت تاخیری که پیش اومد!

مشغله هایی وجود داشت اما مهم تر از اون دنبال یک پلتفرم بودم که بشه خروجی کد ها رو در انتهای هر آموزش ببینید!

بعد از کش و قوس های بسیار بالاخره Code SandBox رو انتخاب کردم که البته محدودیت هایی داره که بعد ها میگیم !

امروز با آموزش Route در React همراه شما دوستان عزیز هستیم.

مقدمه زیاد شد و بهتره بریم سراغ اصل مطلب

اصلا این Route که میگی چی هست؟

مثل همیشه در اول کار برای اینکه یه آموزش رو بهتر متوجه بشیم بهتره اول ببینیم چی رو میخوایم آموزش ببینیم

و بعد به سراغ یادگیری مفاهیم بپردازیم. گوگل ترنسلیت عزیز این بار یکی از معدود مواقعی هست که معنی این کلمه رو درست نوشته 😁

خب Route به معنی مسیر هست! درسته ! یعنی مسیر هایی که ما در برنامه هامون داریم.

لینک Root هر سایت همون لینکی هست که به ” / ” ختم میشه اما خب در تمام سایت ها بخش های دیگه ای وجود داره که آدرس اون ها بعد از علامت ” / ” میاد که هر کدام از این موارد یک Route یا مسیر هستند به عنوان مثال هر دو مورد زیر یک Route به حساب می آیند :


Route در React

برای تعیین مسیر در ری اکت کار ساده ای پیش رو داریم و تنها کافیه مسیر رو مشخص کنیم و بگیم در این مسیر چه کامپوننتی باید بارگزاری بشه !

البته که یک سری نکته ها هم وجود داره که سعی می کنیم در این آموزش براتون شرح بدیم.

پس قدم اول بریم و یک پروژه ی جدید باز کنیم ( توصیه میکنم از این قسمت آموزش ها همراه با آموزش های ما پیش بیاید و در انتها کاری که انجام دادید رو با نتیجه ی ما مقایسه کنید )

قدم اول : نصب Route

با دستور زیر پکیج react-router-dom رو نصب کنید.

قدم دوم : import در فایل js

ما به BrowserRouter و همچنین Route نیاز داریم پس اون ها رو مثل همیشه از پکیج react-router-dom اقدام به import سازیشون می کنیم. درست مثل زیر :

برای اشنایی با BrowserRouter لازمه که بدونید قراره دور کل کد های jsx شما بشینه تا زمانی که component به render رسید و بعد BrowserRouter رو دید بفهمه که قراره با یه سری Route در ارتباط باشه.

اگه یادتون باشه قبلا گفته بودیم که در jsx باید همیشه یک div داشته باشید و الان داریم میگیم که BrowserRouter باید دور کل کد های شما بشینه.

حالا سوال پیش میاد که کدوم مقدم تره؟ 🤔

خب بله ! BrowserRouter مقدم تر هست و اون div مورد نظر باید بلافاصله بعد از BrowserRouter بیاد !

پس تا به الان در return وضعیت باید به این شکل باشه :

قدم سوم : ساخت چند component

خب برای این که بتونیم چند تا مسیر داشته باشیم لازم داریم که چند تا component در اون مسیر ها بارگزاری کنیم پس بریم و چند تا component بسازیم شما می تونید هر چند تا با هر موضوعی که دوست دارید بسازید اما ما برای جامعیت و خلاصه سازی بیشتر چهارcomponent با مشخصات زیر می سازیم :

1- یک component برای مدیریت Navigation اپلیکیشن

2- یک component جهت یک SayHello

3- یک component جهت GoodLuck

4- یک component برای Redirect شدن به component بالا

خب به ترتیب شروع می کنیم به نوشتن component ها

  • Navigation

 

احتمالا الان با یک سوال مواجه شدید که چرا از Link استفاده کردیم و اصلا Link چی هست !

در اپلیکیشن های SPA هدف جلوگیری از لود مجدد صفحه است ! پس به جای a از Link و به جای href از to استفاده می کنیم !

  • SayHello

 

  • GoodLuck

 

  • Redirect

 

خب و اما یکی از نکات جدید در React :

Redirect چیست؟

همه با واژه ریدایرکت آشنا هستیم و می دونیم که به انتقال یک صفحه به صفحه ی دیگه میگن.

در ری اکت و کلا برنامه های async بهتره ریدایرکت در سمت سرور انجام بشه اما خب ما اینجا برای نشان دادن عملکرد اپلیکیشن مدنظرمون از ریدایرکت استفاده کردیم.

راستی دوستان ریدایرکت کردن به شیوه های مختلف قابل انجامه !

در این شیوه که ساده ترین شیوه ی ریدایرکت هست مثل Link عمل می کنیم !

قدم چهارم: Route و Attribute های آن

خب حالا وقتشه که برگردیم به نقطه ی شروع برنامه خودمون !

در ابتدا component هایی که ساخته ایم رو import می کنیم و سپس در داخل div توسط Route ها فراخوانیشون می کنیم :

خب route های مورد نظرمون رو می نویسیم تاکید میکنم (فعلا) ترتیب نوشتنشون مهم نیست اما بعد ها مثال هایی میبینیم که مهم بشه ! 😜

در اینجا فعلا (!) دو تا attribute از route رو ملاحظه می کنید.

1- path : همون مسیری هست که میخوایم کامپوننت مورد نظرمون در اونجا بارگزاری بشه.

2- component : خب این هم که مشخصه ؛ component مورد نظری که میخواهیم در path مدنظرمون بارگزاری بشه.

3- exact : بدین معناست که component مورد نظر فقط و فقط در همین path حق بارگزاری داره و در path های دیگر مشابه چنین حقی رو نداره.

خب این مورد سوم ممکنه یکم گیجتون کرده باشه پس کمی بیشتر توضیح میدم.

در مثال بالا یک path با ” / ” داریم و دیگر path ها همگی با ” / ” شروع می شوند پس دیگر path ها شامل یک ” / ” هستند که همین مورد کافی است تا NavBar در تمامی path های سایت ما render شود.

برای جلوگیری از این اتفاق از کلمه کلیدی exact استفاده می کنیم بدین معنا که component مورد نظر ما یعنی NavBar فقط و فقط زمانی render خواهد شد که عینا در path مربوطه ی اون یعنی ” / ” قرار داشته باشیم.

نکات پایانی

خب به پایان آموزش Route در React رسیدیم و امیدوارم که براتون مفید بوده باشه ❤🙂

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

توجه: به دلیل گسترده بودن موضوع تمامی نکات گفته نشد اما نکات لازم برای شروع خدمت شما سروران گرامی عرض شد. نهایتا طی 1 الی 2 هفته ی دیگر با ارائه ی نکات پیشرفته ی Route در خدمت همه ی شما عزیزان خواهیم بود.

[epcl_button label=”دانلود سورس مینی پروژه” url=”http://s8.picofile.com/file/8348939634/routing_in_reactjs.zip.html” type=”flat” color=”purple” size=”regular” icon=”fa-download” target=”_self”][/epcl_button]

Share:

ارسال یک پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

6 + 2 =