הבעיה העיקרית הקשורה ל-activeClassName ב-React Router היא שהוא לא מעדכן אוטומטית את המחלקה הפעילה כאשר המסלול משתנה. משמעות הדבר היא שמפתחים חייבים לעדכן באופן ידני את המחלקה הפעילה בכל פעם שמסלול משתנה, דבר שעלול לצרוך זמן רב ונוטה לשגיאות. בנוסף, אם מסלולים מרובים מקוננים זה בזה, זה עלול להיות קשה לעקוב אחר המסלול הפעיל כעת ואילו מחלקות יש להחיל על כל רכיב.
<Router> <Link to="/about" activeClassName="active">About</Link> </Router>
1.
2. הרכיב משמש ליצירת קישור שעם לחיצה עליו יעביר את המשתמש לעמוד המצוין בתכונה "to" (במקרה זה, "/about").
3. התכונה activeClassName מציינת איזו מחלקה יש להחיל כאשר הקישור פעיל (במקרה זה, "פעיל").
מה זה NavLink
NavLink הוא רכיב React המשמש ב-React Router ליצירת קישור ניווט בין מסלולים שונים באפליקציה. זה דומה לרכיב הקישור, אבל הוא מוסיף תכונות סגנון לרכיב המעובד כאשר הוא תואם לכתובת ה-URL הנוכחית. NavLink מספק גם אבזר ActiveClassName שניתן להשתמש בו כדי להחיל שם מחלקה כאשר המסלול של הקישור פעיל.
מאפיין activeClassName
התכונה activeClassName ב-React Router משמשת לציון שם מחלקה שיחול על האלמנט כאשר הוא תואם לכתובת ה-URL הנוכחית. זה שימושי לעיצוב קישורים או פריטי ניווט כשהם תואמים למסלול הנוכחי. ניתן להשתמש בו גם כדי להוסיף סגנון נוסף לאלמנטים שאינם קשורים ישירות לניתוב, כגון הדגשת הכרטיסייה הפעילה כעת בסרגל ניווט.
מדוע activeClassName לא יעבוד
ActiveClassName היא תכונה של React Router המאפשרת לך להוסיף מחלקה לקישור הפעיל בתפריט ניווט. לרוע המזל, זה לא יעבוד ב-React Router מכיוון שהוא מסתמך על ה-API של ההיסטוריה של הדפדפן, שאינו זמין ב-React Router. המשמעות היא ש-React Router לא יכול לזהות מתי משתמש לחץ על קישור ולהחיל את ActiveClassName בהתאם.
