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

سلام بچها خیلی وقت بود چیزی نوشتم و باید بهتون بگم من سوییچ کردم سمت ری اکت نه که بخوام از این پله به اون پله بشم هنوزم روی ری اکت نیتیو هستم ولی فعلا کمتر:)برای این اموزش اخرهای کار کدها با context - api ادغام شده اگه بلد نیستید اول اینجا رو بخونیدخیلی ساده نوشتم به نظر خودم که خیلی ساده است https://virgool.io/@bawhari/context-api-with-bahar-pwnl6f509bly ولی اگه در حد یه روتر ساده بخوایید لازم نیست فعلا 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>)}/>بهار چجوری حالا از یه کامپونت بریم به یه کامپونت دیگه؟!خوب بریم سراغ اصل هدفمون ما می خواییم وقتی مثلا روی یه باتن کلیک کرد کاربر بره به کامپونت دیگه index.jsApp.jsDashboard.jsLogin.jsدیدین به همین راحتی فقط با یه تگ <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 یا هرجایی که روترهاتون تعریف کردین بدینو تماااامالبته کدهایی که من نوشتم ممکنه خیلی کثیف عه و می دونم که اصلا بهینه نیست ولی برای اموزش اولیه به درد من که خیلی خورد می تونید شما هم برید به این لینک پروژه را ببینید کامل (لازم بگم تحریمیم یا خودتون می دونید -.- )و اگه جایی به ذهنتون رسید که می تونه کد منو بهتر کنه بهم بگید https://codesandbox.io/embed/login-static-router-context-api-27uo3?fontsize=14 ممکنه دیر این ویرگول بخونی و من تا اون موقع local storage را هم به این اضافه کرده باشم:)منبع و منبع و منبع و منبع و منبع :)و یه منبع خیلی خفن EXAMPLES هاشو برید ببنید پروژه اماده است