آموزش React Router ورژن 6

آموزش قدم به قدم آخرین ورژن React Router با یک پروژه ساده

از انتشار ورژن 6 کتابخونه React Router حدود 5 ماهی می گذره، و این ورژن ویژگی های کاربردی زیادی نسبت به ورژن 5 داره که ما در این نوشته با ساختن یک پروژه قدم به قدم یادشون می گیرم.

خب گام اول مثل همیشه ساخت پروژه اولیه مون هستش

‍‍‍‍npx create-react-app router-v6

خب آخرین ورژن router رو در پروژه نصب می کنیم

npm install react-router-dom

خب همونطور که می دونید هر پروژه Reactjs که از روند بالا تولید میشه، کلی بخش غیرقابل استفاده برای تازه کارها داره که حذفشون می کنیم.(اینو بگم که من از ویرایشگر Atom تحت Lubuntu استفاده می کنم که البته برای شما می تونه هر چیز دیگری باشه)

حالا فایل index.js مون رو هم خلوت می کنیم تا بدین شکل بشه

فایل App.js مون رو نیز هم!

الان همچین چیزی در برنامه مون داریم

در پوشه src یک پوشه به نام components ایجاد کرده و فایل Home.js با محتویات زیر رو در اون ایجاد می کنیم.

حالا فایل App.js رو ویرایش می کنیم تا حاوی Home.js شود، باید به این نکته اشاره کنم که در ورژن ششم، Switch با Routes تعویض شده است.

من برای نوشتن UI از bootstrap و sass کمک می گیرم که البته ارتباطی با روند پروژه نداره و برای سادگی می باشد. برای استفاده ازون من از روش زیر توی پروژه نصبش می کنم و بعد در کامپوننت مدنظرم import اش می کنم.

npm install bootstrap sass

یه کامپوننت جدید به نام Courses.js اضافه می کنیم.

حالا در App.js مون دو تا Route ایجاد می کنیم. اولی به Courses اشاره می کند به طور معمول(مسیر courses). دومی از ویژگی جدیدی به نام Navigate استفاده می کند که ما از طریق مسیر apps به همان مسیر courses می رسیم. (کاربرد آن در ادامه واضح تر خواهد شد.)

حالا در صورتی که به localhost:3000/courses یا localhost:3000/apps برویم با صفحه زیر مواجه می شویم.

حالا دو کامپوننت جدید ایجاد می کنیم که درون کامپوننت Courses آن ها را در ادامه نشان خواهیم داد. این دو کامپوننت AllCourses.js و Bundles.js می باشند. برای شفافیت بگم که Bundles یک کامپوننت در کنار کامپوننت AllCourses است که می تواند موارد دلخواه دیگری در آن قرار بگیرد و AllCourses هم قرار است تمامی درس ها را نشان دهد و Courses هم عوض می کنیم به زودی.

حالا در App.js به route درس ها، دو route می افزاییم. این کار باعث می شود که مسیر دو route جدید در امتداد مسیر درس ها یعنی courses/ باشد.

حالا Courses.js رو ویرایش می کنیم تا حاوی دو button باشد که ما رو AllCourses و Bundles ببره. برای لینک دادن به اون ها از Link و برای نمایش محتواشون از Outlet استفاده می کنیم.

حاصل بدین صورت خواهد بود.

خب خسته نباشید :) . تا اینجا یک Routing ساده صفحات رو انجام دادیم.

حالا فرش کنید که می خواهیم روی هر درس که کلیک شد، اطلاعاتی درباره اون درس به کاربر نمایش داده بشه و اون رو در یک آدرس مجزایی نشان دهد مثلا جزئیات درس CSS در مسیر زیر:

localhost:3000/courses/allcourses/CSS

خب برای اینکار با توجه به relative بودن مسیر، اون رو در route اصلی در App.js می افزاییم. اگر به مسیر SingleCourse دقت کنید، متوجه می شوید که مسیر id: می باشد. این یعنی مسیر دینامیک توسط برنامه خودمون تعیین می شود و می تونه هر چیزی باشه. برای اینکه خود SingleCourse بفهمد که در چه مسیری می باشد، جلوتر روشی با useParams گفته می شود.

حالا تغییرات لازم به کد AllCourses.js می دهیم. لیست درس ها را به کمک map می سازیم. به متد map دقت کنید. اولا از آنجا که ورودی string است پس به وسیله template literals ما مسیر خودمون رو تولید کردیم. فرق این کد با کد قبلی این است که Link به NavLink تبدیل شده است. تفاوت اصلی NavLink این است که وقتی روی آن کلید می شود، به طور خودکار کلاس active. برای آن فعال می شود و بدین وسیله ما در کد css مون می تونیم براش ویژگی خاصی تعیین کنیم. فقط همین! اگر حال نمی کنید همون Link رو بگذارید باشه. نهایتا هم با Outlet محتوای اون مسیر رو نشون می دهیم.

خب توی App.js محتوای مسیرهای فوق رو به SingleCourse متصل کردیم حالا SingleCourse.js رو می سازیم. برای دسترسی به id که در واقع همون مسیر ماست، از هوکی به نام useParams استفاده می کنیم و اطلاعات را نشان می دهیم.

خب حالا نکته دیگری رو با هم تمرین می کنیم و اون pass کردن دیتا بین دو کامپوننت است. در ورژن 6 router این کار را می توان هم با هوک useNavigate و هم با خود Link انجام داد. ما هر دوی این روش ها رو تست می کنیم.

به این منظور، در SingleCourse ما بخشی رو درنظر می گیریم که اطلاعات را به کامپوننتی به نام Dashboard برای ما منتقل کند که در یک route جداگانه می باشد. بنابراین اول Dashboard را در App.js معرفی می کنیم.

حالا تغیرات لازم را در SingleCourse.js داده که همانطور که گفتیم قرار است اطلاعات را برای ما منتقل کند از دو روش. برای انتقال از طریق useNavigate از تگ <a> استفاده کردیم که البته می توانست button هم باشد یا هر چیزی دیگری و از Link هم برای انتقال داده به کامپوننت Dashboard استفاده کردیم.