مسیریاب (Router) در ReactJS – آموزش ReactJS

reactjs router 6174 تصویر

مسیریاب (Router) در ReactJS

در این بخش از آموزش ReactJS نحوه راه اندازی مسیریاب (routing) در ReactJS برای برنامه را بررسی خواهیم کرد.

مرحله اول : نصب React Router

یک راه ساده به منظور نصب react-router استفاده از دستور زیر در خط فرمان است:

مرحله دوم : ایجاد کامپوننت ها

در این مرحله چهار کامپوننت ایجاد خواهیم کرد. کامپوننت App به عنوان یک منو تب استفاده می شود. سه کامپوننت دیگر (Home، About و Contact) در هنگام تغییر مسیر (route) رندر می شوند.

محتوای فایل App.jsx:

مرحله سوم : افزودن مسیریاب (Router)

حال ما مسیرها را به App اضافه می کنیم. به جای رندر کردن App مانند مثال های قبلی، در ایجا router رندر می شود. همچنین برای هر router یک کامپوننت تنظیم کرده ایم.

محتوای فایل main.js:

زمانی که برنامه اجرا شود، ما سه لینک در صفحه مشاهده خواهیم کرد که به منظور تغییر مسیر استفاده می شوند.

clickable links.jpg 6174 تصویر

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است