7.4 ריאקט ראוטר תרגול

תרגול - ריאקט ראוטר - React Router¶

תרגיל 1 - אתר תדמית בסיסי¶

צרו אתר תדמית עם ניווט בסיסי.

דרישות:
- דפים: בית, אודות, שירותים, צרו קשר
- תפריט ניווט קבוע (navbar) עם NavLink שמדגיש את הדף הפעיל
- כל דף מציג תוכן שונה
- דף 404 מותאם לנתיבים לא קיימים
- כפתור "חזרה לדף הבית" בדף 404

תרגיל 2 - בלוג עם נתיבים דינמיים¶

צרו בלוג פשוט עם רשימת פוסטים ודף פוסט בודד.

דרישות:
- דף ראשי שמציג רשימת פוסטים (כותרת, תאריך, תקציר)
- לחיצה על פוסט מעבירה לדף /posts/:postId
- דף פוסט בודד שמציג את התוכן המלא
- כפתור חזרה לרשימה
- אם מנסים לגשת לפוסט לא קיים, מציגים הודעת שגיאה

נתוני דוגמה:

const posts = [
  { id: 1, title: "מבוא לריאקט", date: "2024-01-15", excerpt: "למדו את הבסיס...", content: "תוכן מלא..." },
  { id: 2, title: "הוקים מתקדמים", date: "2024-02-20", excerpt: "הוקים מתקדמים ב...", content: "תוכן מלא..." },
  { id: 3, title: "ניהול סטייט", date: "2024-03-10", excerpt: "איך לנהל state ב...", content: "תוכן מלא..." },
];

תרגיל 3 - לוח בקרה עם נתיבים מקוננים¶

צרו לוח בקרה (Dashboard) עם נתיבים מקוננים.

דרישות:
- layout ראשי עם sidebar וחלק תוכן
- נתיבים מקוננים: /dashboard (סקירה), /dashboard/users (משתמשים), /dashboard/products (מוצרים), /dashboard/settings (הגדרות)
- ה-sidebar מציג את הנתיבים עם NavLink פעיל
- בדף משתמשים, לחיצה על משתמש מעבירה ל-/dashboard/users/:userId
- Breadcrumbs (ניווט פירורי לחם) שמציג את הנתיב הנוכחי

תרגיל 4 - חנות מקוונת עם סינון ב-URL¶

צרו חנות מקוונת שהסינון שלה נשמר ב-URL.

דרישות:
- דף מוצרים עם סינון לפי: קטגוריה, טווח מחירים, מיון
- כל הפילטרים נשמרים ב-query string: ?category=electronics&sort=price&minPrice=100
- שיתוף לינק עם הפילטרים הפעילים
- רענון הדף שומר את הפילטרים
- כפתור "נקה פילטרים" שמאפס את ה-URL
- דף מוצר בודד עם כפתור "חזרה למוצרים" ששומר את הפילטרים

תרגיל 5 - אותנטיקציה עם נתיבים מוגנים¶

צרו מערכת אותנטיקציה מלאה עם ניתוב.

דרישות:
- דפים ציבוריים: בית, התחברות, הרשמה
- דפים מוגנים: פרופיל, הגדרות, לוח בקרה
- אם משתמש לא מחובר ניגש לדף מוגן, הוא מופנה לדף התחברות
- אחרי התחברות, המשתמש חוזר לדף שניסה לגשת אליו
- אם משתמש מחובר ניגש לדף התחברות, הוא מופנה לדף הבית
- כפתור התנתקות שמפנה לדף הבית

תרגיל 6 - אפליקציית מתכונים מלאה¶

צרו אפליקציית מתכונים מלאה עם ניתוב מתקדם.

דרישות:
- מבנה נתיבים: / (בית), /recipes (כל המתכונים), /recipes/:id (מתכון בודד), /categories/:category (מתכונים לפי קטגוריה), /favorites (מועדפים - מוגן), /add-recipe (הוספה - מוגן)
- ניווט עם NavLink ו-breadcrumbs
- סינון וחיפוש ב-URL (useSearchParams)
- מועדפים נשמרים ב-localStorage
- אנימציית מעבר בין דפים (CSS transitions)
- טעינת נתונים מדומה עם מצב loading
- דף 404 מותאם

שאלות¶

מה ההבדל בין Link ל-NavLink? מתי נשתמש בכל אחד?
מה ההבדל בין navigate(path) ל-Navigate component? מתי נשתמש בכל אחד?
מה היתרון של שמירת פילטרים ב-URL עם useSearchParams לעומת useState?
איך עובד ה-Outlet? מה קורה כשיש מספר רמות של Outlet מקונן?
מה ההבדל בין replace: true ל-replace: false (ברירת מחדל) בניווט?