آموزش ساخت رابط های کاربری مدرن با React Router v6

مقدمه Introduction

• ساخت UI های مدرن Building modern UIs

• آنچه باید در مورد React بدانید What you should know about React

• پروژه را راه اندازی کنید Set up the project

1. مبانی مسیریابی 1. Routing Basics

• اصول مسیریابی The fundamentals of routing

• React Router DOM را نصب کنید و به URL مرورگر متصل شوید Install React Router DOM and connect to the browser's URL

• اولین مسیر خود را پیکربندی کنید Configure your first route

• از Link برای پیمایش بین صفحات استفاده کنید Use Link to navigate between pages

• چالش: یک ناوبری با پیوند و مسیر ایجاد کنید Challenge: Create a navigation with Link and Route

• راه حل: با Link and Route یک ناوبری ایجاد کنید Solution: Create a navigation with Link and Route

• امتحان فصل Chapter Quiz

2. مسیرهای تودرتو و پارامترهای URL 2. Nested Routes and URL Parameters

• مسیریابی تودرتو چگونه کار می کند How nested routing works

• یک مسیر 404 یا بدون تطابق ایجاد کنید Create a 404 or No Match Route

• متغیرهایی را برای ایجاد مسیرهای پویا تعریف کنید Define placeholders to create dynamic routes

• خواندن و نمایش پارامترهای URL Read and display URL parameters

• نمایش لینک های فعال Display active links

• چالش: یک UI تودرتو از مسابقات مسیر ارائه دهید Challenge: Render a nested UI from route matches

• راه حل: یک UI تودرتو از مسابقات مسیر ارائه دهید Solution: Render a nested UI from route matches

• امتحان فصل Chapter Quiz

3. مسیریابی را ادامه دهید 3. Take Routing Further

• مسیرهای شاخص Index routes

• به صورت برنامه ای پیمایش کنید Navigate programmatically

• هنگام پیمایش برنامه‌ای، داده‌ها را ارسال کنید Pass data when navigating programmatically

• چالش: وضعیت موقعیت مکانی را پاس کنید Challenge: Pass location state

• راه حل: وضعیت موقعیت مکانی را پاس کنید Solution: Pass location state

• امتحان فصل Chapter Quiz

نتیجه Conclusion

• مراحل بعدی Next steps