Glavni problem vezan za activeClassName u React Routeru je taj što on ne ažurira automatski aktivnu klasu kada se ruta promijeni. To znači da programeri moraju ručno ažurirati aktivnu klasu kad god se ruta promijeni, što može biti dugotrajno i sklono greškama. Osim toga, ako je više ruta ugniježđeno jedna u drugu, može postati teško pratiti koja je ruta trenutno aktivna i koje klase treba primijeniti na svaki element.
<Router> <Link to="/about" activeClassName="active">About</Link> </Router>
1. The
2. The komponenta se koristi za kreiranje veze koja će, kada se klikne, odvesti korisnika na stranicu navedenu u atributu “to” (u ovom slučaju, “/about”).
3. Atribut activeClassName specificira koju klasu treba primijeniti kada je veza aktivna (u ovom slučaju, “aktivna”).
Šta je NavLink
NavLink je React komponenta koja se koristi u React Routeru za kreiranje navigacijske veze između različitih ruta u aplikaciji. Slično je komponenti Link, ali dodaje stilske atribute prikazanom elementu kada se podudara sa trenutnim URL-om. NavLink također pruža ActiveClassName prop koji se može koristiti za primjenu naziva klase kada je ruta veze aktivna.
atribut activeClassName
Atribut activeClassName u React Routeru se koristi za specificiranje imena klase koje će biti primijenjeno na element kada odgovara trenutnom URL-u. Ovo je korisno za stiliziranje veza ili navigacijskih stavki kada se podudaraju s trenutnom rutom. Također se može koristiti za dodavanje dodatnog stila elementima koji nisu direktno povezani s usmjeravanjem, kao što je isticanje trenutno aktivne kartice u navigacijskoj traci.
Zašto ActiveClassName ne radi
ActiveClassName je karakteristika React Routera koja vam omogućava da dodate klasu aktivnoj vezi u navigacionom meniju. Nažalost, neće raditi u React Routeru jer se oslanja na historijski API pretraživača, koji nije dostupan u React Routeru. To znači da React Router ne može otkriti kada je korisnik kliknuo na vezu i u skladu s tim primijeniti ActiveClassName.
