چگونه با React Router بین صفحات جابجا بشیم؟



visibility  
mode_comment   ۰

چگونه با React Router بین صفحات جابجا بشیم؟

در این مطلب میخوایم یاد بگیریم که چطور میتونیم با استفاده از React Router بین صفحات مختلف جابجا بشیم. این Redirect ها سمت کلاینت انجام میشه و Client side هستند و از قوانین مربوط به Single page application یا SPA پیروی میکنند.

همونطور که میدونین React router یک کتابخانه استاندارد برای routing هست که در پروژه‌های React از اون برای مشخص کردن مسیر و URL صفحات استفاده میشه. شما میتونین این مقاله رو مطالعه کنید تا متوجه بشید که SPA چطور کار میکنه.

React router از نسخه 4 به بعد به 3 قسمت تقسیم شده است که عبارتند از:

  • react-router
  • react-router-dom
  • react-router-native

تقریبا هیچوقت نیاز نمیشه که بصورت مستقیم react-router رو نصب کنید چون این قسمت شامل هسته React router هست و هم در react-router-dom و هم در react-router-native مورد استفاده قرار میگیره.

اگر از React استفاده میکنید و میخواید برنامه‌ای بنویسید که در وب و مرورگر اجرا بشه باید react-router-dom رو استفاده کنید و اگر میخواید اپلیکیشنی رو برای تلفن‌های همراه با استفاده از React-native به وجود بیارید باید از react-router-native استفاده کنید.

با نصب هر کدام از موارد بالا، react-router به عنوان یک پیش‌نیاز نصب میشه و نیاز به نصب مستقیم ندارد.

در این مطلب هدفمون آموزش routing و موارد مربوط به اون نیست و میخوایم ببینیم که چطور میتونیم درون یک Component و در شرایطی خاص به یک route خاص navigate کنیم و جابجا بشیم.

فرض کنید که routing سایت ما بصورت زیر تعریف شده است:

همونطور که میبینید BrowserRouter و Route و Switch رو از react-router-dom وارد پروژه کردیم و از اونا استفاده کردیم. 2 مسیر به وجود آوردیم که یکی از اونا برای / یا آدرس ریشه سایت هست که component مربوط به WelcomeScreen رو رندر میکنه و دیگری آدرس /login هست که component مربوط به LoginScreen رو رندر میکنه که کاربر در اون میتونه وارد وبسایت بشه.

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

زمانی که از Switch استفاده میکنیم، اگر آدرس وارد شده در Address bar مرورگر متناسب با هیچ یک از مسیرها نباشد، مسیر آخر انتخاب میشه و component مربوط به اون رندر میشه.

خب حالا که یک Route تعریف کردیم و با استفاده از اون کامپوننت LoginScreen رو رندر کردیم، خود React router یک ویژگی به props های این کامپوننت بنام history اضافه میکنه که با استفاده از اون میتونین کارهای مورد نظرمون رو انجام بدیم و به هر جایی از پروژه که دلمون بخواد و نیاز باشه navigate کنیم و جابجا بشیم. کدهای زیر درون کامپوننت LoginScreen قرار دارد:

همونطور که میبینید یک فرم ساده درون این کامپوننت قرار داده شده و زمانی که این فرم Submit میشه متد formSubmit فراخوانی میشه.

همونطور که گفتیم ویژگی history به props های کامپوننت LoginScreen اضافه شده است. پس درون متد formSubmit میتونیم با استفاده از this.props.history کارهای مورد نظرمون رو با تاریخچه مرورگر انجام بدیم. history دو متد اصلی رو در اختیار ما قرار میده که میتونیم با استفاده از اونا به صفحات مورد نظرمون منتقل بشیم:

  • push : به آدرس مورد نظر منتقل میشیم و آدرس جدید به history اضافه میشه و آدرس قبلی هم در history قرار داره و میتونیم با استفاده از دکمه Back مرورگر به اون برگردیم.
  • Replace : به آدرس مورد نظر منتقل میشیم و آدرس جدید با آدرس فعلی در history جایگزین میشه و دیگه نمیتونیم به آدرس قبلی برگردیم.

میبینید که در کدهای بالا و در متد formSubmit از this.props.history.push('/') استفاده شده است که باعث میشه به صفحه اصلی منتقل بشیم و کامپوننت WelcomeScreen نمایش داده بشه.

به همین راحتی.

در حال حاضر در وب‌سایت سون لرن ثبت‌نام دوره متخصص جاوا اسکریپت هم شروع میشه که توی اون تعداد زیادی از قابلیت‌های Javascript و تکنولوژی‌های مفید و مدرن دیگر آموزش داده میشه. می تونید با شرکت در این دوره به متخصص جاوا اسکریپت تبدیل بشید.

نتیجه گیری

در این مطلب نحوه جابجا شدن و navigate کردن بین صفحات مختلف سایت با استفاده از react router رو بررسی کردیم و دیدیم که این ابزار یک ویژگی بنام history به props های کامپوننت اضافه میکنه و میتونیم از اون استفاده کنیم.

اگر شما هم توضیحاتی در مورد React router دارید میتونین در بخش نظرات به اشتراک بذارید.

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.