A React Router ActiveClassName-ével kapcsolatos fő probléma az, hogy nem frissíti automatikusan az aktív osztályt, amikor az útvonal megváltozik. Ez azt jelenti, hogy a fejlesztőknek manuálisan kell frissíteniük az aktív osztályt, amikor egy útvonal megváltozik, ami időigényes és hibás lehet. Ezen túlmenően, ha több útvonal van egymásba ágyazva, nehéz lehet nyomon követni, hogy melyik útvonal jelenleg aktív, és milyen osztályokat kell alkalmazni az egyes elemekre.
<Router> <Link to="/about" activeClassName="active">About</Link> </Router>
1. A
2. A komponens egy hivatkozás létrehozására szolgál, amelyre kattintva a felhasználó a „to” attribútumban megadott oldalra jut (jelen esetben a „/about”).
3. Az activeClassName attribútum megadja, hogy melyik osztályt kell alkalmazni, amikor a hivatkozás aktív (ebben az esetben „aktív”).
Mi az a NavLink
A NavLink egy React komponens, amelyet a React Routerben használnak, hogy navigációs kapcsolatot hozzon létre egy alkalmazás különböző útvonalai között. Hasonló a Hivatkozás összetevőhöz, de stílusattribútumokat ad hozzá a megjelenített elemhez, ha az megegyezik az aktuális URL-lel. A NavLink egy activeClassName javaslatot is biztosít, amely használható osztálynév alkalmazására, ha a hivatkozás útvonala aktív.
activeClassName attribútum
Az ActiveClassName attribútum a React Routerben egy osztálynév megadására szolgál, amely akkor kerül alkalmazásra az elemre, amikor az megegyezik az aktuális URL-lel. Ez hasznos a hivatkozások vagy navigációs elemek stílusozásához, ha azok megfelelnek az aktuális útvonalnak. Használható további stílusok hozzáadására is olyan elemekhez, amelyek nem kapcsolódnak közvetlenül az útválasztáshoz, például kiemelheti az aktuálisan aktív lapot a navigációs sávban.
Miért nem működik az activeClassName?
Az ActiveClassName a React Router szolgáltatása, amely lehetővé teszi, hogy osztályt adjon hozzá a navigációs menü aktív hivatkozásához. Sajnos a React Routerben nem fog működni, mert a böngésző előzményei API-jára támaszkodik, amely nem érhető el a React Routerben. Ez azt jelenti, hogy a React Router nem tudja észlelni, ha a felhasználó rákattint egy hivatkozásra, és ennek megfelelően alkalmazza az activeClassName-et.
