مقدمه :

اگر از یک لینک خارجی به این صفحه اومدید و یا اولین باره به دنبال مطلب آموزشی در مورد Route می گردید توصیه میکنم ابتدا آموزش Route در React رو مطالعه کنید.

در قسمت قبل تا جایی مباحث رو پیش بردیم که Attribute های Route رو کامل معرفی کردیم.

در این قسمت می خواهیم به آموزش یک راه دیگه برای Routing در React بپردازیم.

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

render کردن یک Component در Route

خب در ابتدا میگم که شما می تونید یک Component رو همونطور که در مطلب قبلی هم گفتم ارسال کنید به Route مورد نظرتون !

اما خیلی مهمه که ما props ها رو از دست ندیم ! این props ها شامل مواردی مثل (history/location/match) هستند که اطلاعاتی در مورد path و Route به ما خواهند داد.

برای این که این props ها رو با خودمون ببریم با استفاده از متد render به صورت زیر Component رو به Route ارسال می کنیم:

 

advanceroute_in_react

همونطور که می بینید در متد render با ارسال props ها به list یک h2 رو به عنوان jsx بازگردوندیم!

خب اما مورد زیر رو هم ببینید که همه موارد رو دیده باشید 😃

advanceroute_in_react_component

همونطور که می بینید در render مثل قدیم می تونید component هم load کنید و بهش props پاس بدید 🤓

 

ارسال props ها و استفاده از render به چه دردی می خوره؟

 

شاید فکر کنید ما داریم مهمل میگیم و ممکنه هیچوقت این props ها به کارتون نیاد 😁 اما باید بگیم که در اشتباهید چون ما کارای اشتباه زیاد کردیم اما آموزش اشتباه نمیدیم 😬

دوستان فرض کنید شما در یک component و یک path قرار دارید که پس از انجام کاری قراره redirect انجام بدید.

و چون اکثر کارها وابسته به سرور هست پس یک فعالیت async محسوب میشه و نباید redirect رو توی front انجام بدید و باید به صورت serverside هندل کنید ( این یک نکته ی خیلی خفن بود که در یک پروژه حدودا ۲ ساعت از وقت من رو گرفت 😁)

پس لازمه که در history یک path رو push کنید که خب history رو باید از props بگیرید . به عنوان نمونه کد زیر رو ببینید :

 

advanceroute_in_react_props

خب بله همینطور که ملاحظه می کنید دیگه چه حاجت به بیان است 😁

این وسط یک نکته رو باید رعایت کنید :

شما تنها زمانی به props ها دسترسی دارید که component رو از طریق بیرونی ترین لایه ی اپلیکیشنتون از طریق Route اقدام به render کردنش کرده باشید و حالا فرض کنید شما یک Component به نام A رو از این طریق render کردید و داخل component A یک component دیگه به نام B وجود داره که این component احتیاج به props های component A داره !

بنظر شما باید چیکار کرد؟

در این مواقع باید از یک HOC یا Hire Order Component استفاده کنیم به نام withRouter و توسط این HOC میتوانیم props ها را ارسال کنیم.

withRouter در پکیج react-router-dom قرار داره 🙂

تا اینجا میشه گفت شما نکات بسیار زیاد و پیشرفته ای رو در مورد Route می دونید 🤓

 

ارسال پارامتر در Route

 

گاهی لازمه تا شما در یک path یک پارامتر خاص داشته باشید به عنوان مثال :

 

http://yoursite.com/posts/2

 

به عنوان مثال این یک نمونه برای path دلخواه شما در اپلیکیشن یک id و یک پارامتر وجود داره که در component مربوطه قراره پاس داده بشه.

این مثال رو یک بار دیگه با آموزش کامل axios خواهیم دید اما فعلا میخواهیم نشون بدیم به چه صورت می تونیم این درخواست ها رو برای Route هندل کنیم

 

advanceroute_in_react_parameters

همونطور که می بینید ما از id: برای اینکه اپلیکیشن متوجه بشه یک پارامتر پس از blog قرار هست داشته باشه استفاده می کنیم.

و بعد در SinglePost Component در متد ComponentDidMount توسط درخواستی که با axios به سرور می زنیم هندل می کنیم که چه عبارات و مشخصاتی در اون قسمت قرار بگیره. ( توصیه میکنم اگر این جا رو متوجه نشدید حتما آموزش axios ما رو بخونید )

 

سخن پایانی

و اما به پایان آمد این دفتر 😃

بعد از حدود انتشار ۲ پست و ۲ هزار کلمه آموزش کامل react router رو خدمتتون ارائه دادیم.

می تونید از دیگر پکیج ها هم استفاده کنید که در ایــــن صـــفــــحــــه آورده شده.

هم چنین این عکس مفهومی رو ببینید 😜

react-router

ما از اسپم متنفریم

برای شما ارزش زیادی قائلیم و قرار نیست براتون اسپم ارسال کنیم !

تنها داغ ترین و مفید ترین موضوعات برای شما ارسال خواهد شد

با موفقیت عضو شدید!