آموزش تکنیک‌های پیشرفته React Router با TypeScript - آخرین آپدیت

شروع کار با React Router Getting Started with React Router

• چرا React Router و چرا اکنون؟ Why React Router and why now?

• تکنیک‌های React Router React Router techniques

1. مبانی React Router 1. React Router Basics

• مسیریابی پایه و کامپوننت‌های لینک Basic routing and link components

• چالش: ناوبری بدون وقفه با مسیرهای پروفایل و داشبورد Challenge: Seamless navigation with profile and dashboard routes

• راهکار: ناوبری بدون وقفه با مسیرهای پروفایل و داشبورد Solution: Seamless navigation with profile and dashboard routes

• ویژگی‌های React Router Features of React Router

• نصب و راه‌اندازی React Router Install and set up React Router

• مسیریابی سمت کلاینت چیست؟ What is client-side routing?

2. مسیریابی پیشرفته با Layoutها، مسیرهای تودرتو و پارامترهای پویا 2. Advanced Routing with Layouts, Nested Routes, and Dynamic Parameters

• ایجاد لینک‌های پویا با Link و NavLink Creating dynamic links with Link and NavLink

• استخراج مسیرها و ساختاردهی Layout در React Router Extracting routes and structuring layout in React Router

• درک مسیرهای تودرتو (Nested Routes) Understanding nested routes

• مسیرهای پویا با useParams Dynamic routes with useParams

• راهکار: راه‌اندازی مسیرهای پویا برای نمایش صفحه جزئیات دستور پخت Solution: Set up dynamic routes to render a detailed recipe page

• چالش: راه‌اندازی مسیرهای پویا برای نمایش صفحه جزئیات دستور پخت Challenge: Set up dynamic routes to render a detailed recipe page

3. محافظت از مسیرها با احراز هویت 3. Protecting Routes with Authentication

• چالش: پیاده‌سازی صفحه داشبورد به عنوان یک مسیر محافظت‌شده Challenge: Implement a dashboard page as a protected route

• پیاده‌سازی مسیرهای محافظت‌شده (Protected Routes) Implementing protected routes

• راهکار: پیاده‌سازی صفحه داشبورد به عنوان یک مسیر محافظت‌شده Solution: Implement a dashboard page as a protected route

• مدیریت تغییر مسیرها (Redirects) و ناوبری برنامه‌نویسی‌شده Handling redirects and navigating programmatically

• ساخت صفحات ورود و پروفایل Building the login and profile pages

4. بهینه‌سازی عملکرد با بارگذاری تنبل (Lazy Loading) 4. Optimizing Performance with Lazy Loading

• راهکار: پیاده‌سازی بارگذاری تنبل برای تمام مسیرها و کامپوننت‌های اصلی Solution: Implement lazy loading for all main routes and components

• محدوده‌های خطا (Error Boundaries) برای کامپوننت‌های Lazy Load شده Error boundaries for lazy loaded components

• درک بارگذاری تنبل و مزایای آن Understanding lazy loading and its benefits

• چالش: پیاده‌سازی بارگذاری تنبل برای تمام مسیرها و کامپوننت‌های اصلی Challenge: Implement lazy loading for all main routes and components

• پیاده‌سازی Lazy Loading برای مسیرها و کامپوننت‌ها Implementing lazy loading for routes and components

5. انتقال بین مسیرها و ارتقای تجربه کاربری 5. Route Transitions and Enhancing User Experience

• انتقال داده‌ها بین مسیرها: Link و useLocation Passing data between routes: Link and useLocation

• انتقال داده‌ها بین مسیرها: useNavigate Passing data between routes: useNavigate

• مدیریت صفحات 404 و تغییر مسیرها Handling 404 pages and redirects

جمع‌بندی و گام‌های بعدی Conclusion and Next Steps

• مرور نکات کلیدی یادگرفته شده Recap of key learnings

• مسیرهای یادگیری بیشتر در توسعه پیشرفته فرانت‌اند Further learning paths in advanced front-end development