چگونه با react router بین کامپونت ها جا به جا بشیم؟(کامل)

سلام بچها خیلی وقت بود چیزی نوشتم و باید بهتون بگم من سوییچ کردم سمت ری اکت نه که بخوام از این پله به اون پله بشم هنوزم روی ری اکت نیتیو هستم ولی فعلا کمتر:)

برای این اموزش اخرهای کار کدها با context - api ادغام شده اگه بلد نیستید اول اینجا رو بخونید

خیلی ساده نوشتم به نظر خودم که خیلی ساده است

ولی اگه در حد یه روتر ساده بخوایید لازم نیست فعلا context - api بدونید و اگه مبتدی هستید به نظرم فعلا با همین روتر تنها پیش برید و مث من پله پله برید جلو

این جوری فان ترعه:)

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

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

اول دوم سوم که نوشتم فقط بخاطر مرتب شدن متن عه:/

با کامند زیرنصب میشه

npm install --save react-router-dom

اولین چیزی که ممکنه توی مثال ها ببینید

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

ولی این BrowserRouter چیه که تازه تغیرنامش دادیم به Router ؟!

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

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

اگه شما هم مث من چیزی نفهمیدیم از این قسمت زیاد جدی نگیرید فعلا تو این مرحله مهم نیست دونستن این و فقط بگم یکیشون لینک معمولی درست میکنه یکی وسط لینک چندتا #

برای اشنایی با BrowserRouter لازمه که بدونید مثل div عمل می کنه که وقتی از یه تگ بیشتر خواستین بنویسین باید داخل div باشه

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

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

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

یه مثال ببنیم

وقتی بالای routeهامون کامپونتی می نویسیم اون کامپونت ها در هر url رندر میشن و وجود دارند الان تو عکس بعدی بعدی li های home , cities می بینید که همیشه ی خدا هستن:)در هر urlایی:)

می بینید که حتی وقتی میزنیم روی سیتی باز کامپونت هوم اجرا میشه و ما نمی خواییم این جوری باشه

راه کار چیع؟!

exact

  <Route exact path="/" component={Home}/>

این کلید واژه باعث میشه کامپونت هوم فقط توی مسیر خودش رندر بشه و توی مسیرهای دیگه خودشو قاطی نکنه:/

اینجا دو نکته داریم یکی path که مسیر توی مروگر ما رو مشخص می کنه همون URL و یکی کامپونت که میگه کدوم کامپونت نشون داده بشه و این دوتا اتربیوت باید باهم باشن

render props

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

<Route path="/airports" render={() => (<div> This is the airport route </div>)}/>

بهار چجوری حالا از یه کامپونت بریم به یه کامپونت دیگه؟!

خوب بریم سراغ اصل هدفمون ما می خواییم وقتی مثلا روی یه باتن کلیک کرد کاربر بره به کامپونت دیگه

دیدین به همین راحتی فقط با یه تگ <Link> از هرجا به هرجا دوست دارید برید:)

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

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

NOT FOUNT 404

چجوری از این صفحه ها بسازیم؟ یادتون بالا گفتم راجب اتربیوت های PATH , COMPONENT خوب اینجارو نگاه کنید

        <Route component={Notfound} />

وقتی ما pathایی ندیم هر path ای غیر از اون هایی که تعریف کردیم کاربر برعه این کامپونت براش باز میشه خوب اگه اینو ننویسیم اگه کاربر یه url نا معتبر زد فقط یه صفحه سفید نشونش میده که خوب نیست و بهترعه این جوری هندل کنیم

push method

چه زمانی از push استفاده می کنیم؟

معمولا زمان هایی که ما داخل یه تگ نیستیم

این ینی چی ؟

تجربه ای که من داشتم این بود که توی context وقتی می خواستم توی UserProvider ام یه متد بنویسم و لازم داشتم بگم اگه شرط برقرار بود برو به این کامپونت و اگه نبود به اون یکی کامپونت به یه مشکل برخوردم <Link> که تا الا استفاده می کردیم یه تگ عه و توی فانکشنی که من می نوشتم تک نداریم کههه

پس اینجاست که متد push به کمکمون میاد

می بینید راحت می تونم نویگیت کنم

ولی حالا شاید بپرسید بهار اون history داستانش چیه ؟ منم باید بهتون بگم که برید ادامه را بخونید:)

history

کلا history مسیرهارو برای ما نگه میداره به چه شکل؟ مثلا از لاگین رفتیم به داشبورد بعد با زدن باتن بک دوباره برمی گردیم به لاگین

کد زیر را ببنید

فکر کنم همه چی واضحه اگه نفهمیدید مهم نیست جز اون کدهایی که معمولا همه جا ثابته :)

خب حالا چجوری استفاده کنیم

اینو یادتونه ؟ خوب ما یه history به فانکشنمون پاس دادیم درسته ولی موقع کال بهش چی بدیم ایا؟

راحت بدون خون و خون ریزی نه نیاز به import دیگه داره نه چیزی

ممکنه اولش یکم گیج بشید من در ادامه براتون پروژه کاراموزیمو میزارم که راحت اونجا همه ی کد هارو ببنید و لایو تست کنید

PrivateRoute

ولی حالا تا اینجا که یاد گرفتیم بزارید تجربه ی کار با PrivateRoute هم بگم

سینا دوستم بهم گقت که کلا برای احراز هویت و برای این که بفهمیم

کاربر ما اگه لاگین کرده مثلا برعه داشبورد

و اگه نکرده کامپونت لاگین بیاره

بهتره که از PrivateRoute استفاده کنیم

خوب برای PrivateRoute ما باید یه کامپونت جدید بسازیم و اونجا بیاییم و چک کنیم

مثلا من اینجا امدم چک کردم اگه که logStatus من برابر true بود بره داشبورد و اگه نبود ریدایرکت بشه به لاگین

ولی وقتی از PrivateRoute استفاده می کنیم باید یه تغیری ریزی هم به فایل index یا هرجایی که روترهاتون تعریف کردین بدین

و تماااام

البته کدهایی که من نوشتم ممکنه خیلی کثیف عه و می دونم که اصلا بهینه نیست ولی برای اموزش اولیه به درد من که خیلی خورد می تونید شما هم برید به این لینک پروژه را ببینید کامل (لازم بگم تحریمیم یا خودتون می دونید -.- )و اگه جایی به ذهنتون رسید که می تونه کد منو بهتر کنه بهم بگید

ممکنه دیر این ویرگول بخونی و من تا اون موقع local storage را هم به این اضافه کرده باشم:)

منبع و منبع و منبع و منبع و منبع :)

و یه منبع خیلی خفن EXAMPLES هاشو برید ببنید پروژه اماده است