Glavna težava, povezana z activeClassName v React Routerju, je, da ne posodobi samodejno aktivnega razreda, ko se pot spremeni. To pomeni, da morajo razvijalci ročno posodobiti aktivni razred vsakič, ko se pot spremeni, kar je lahko zamudno in nagnjeno k napakam. Poleg tega, če je več poti ugnezdenih druga v drugo, lahko postane težko spremljati, katera pot je trenutno aktivna in katere razrede je treba uporabiti za vsak element.
<Router> <Link to="/about" activeClassName="active">About</Link> </Router>
1.
2. komponenta se uporablja za ustvarjanje povezave, ki ob kliku uporabnika pripelje na stran, določeno v atributu »to« (v tem primeru »/about«).
3. Atribut activeClassName določa, kateri razred naj se uporabi, ko je povezava aktivna (v tem primeru »aktivna«).
Kaj je NavLink
NavLink je komponenta React, ki se uporablja v React Routerju za ustvarjanje navigacijske povezave med različnimi potmi v aplikaciji. Podobna je komponenti povezave, vendar upodobljenemu elementu doda atribute sloga, ko se ujema s trenutnim URL-jem. NavLink nudi tudi podlago activeClassName, ki se lahko uporabi za uporabo imena razreda, ko je pot povezave aktivna.
atribut activeClassName
Atribut activeClassName v React Routerju se uporablja za določitev imena razreda, ki bo uporabljeno za element, ko se bo ujemal s trenutnim URL-jem. To je uporabno za oblikovanje povezav ali elementov navigacije, ko se ujemajo s trenutno potjo. Uporabite ga lahko tudi za dodajanje dodatnega sloga elementom, ki niso neposredno povezani z usmerjanjem, kot je označevanje trenutno aktivnega zavihka v navigacijski vrstici.
Zakaj activeClassName ne deluje
ActiveClassName je funkcija React Routerja, ki vam omogoča, da aktivni povezavi v navigacijskem meniju dodate razred. Na žalost ne bo deloval v React Routerju, ker se zanaša na API zgodovine brskalnika, ki ni na voljo v React Routerju. To pomeni, da React Router ne more zaznati, kdaj je uporabnik kliknil povezavo, in ustrezno uporabiti activeClassName.
