El principal problema relacionat amb activeClassName a React Router és que no actualitza automàticament la classe activa quan canvia la ruta. Això vol dir que els desenvolupadors han d'actualitzar manualment la classe activa sempre que canviï una ruta, cosa que pot consumir molt de temps i propensa a errors. A més, si hi ha diverses rutes imbricades entre si, pot ser difícil fer un seguiment de quina ruta està activa actualment i quines classes s'han d'aplicar a cada element.
<Router> <Link to="/about" activeClassName="active">About</Link> </Router>
1. La
2. La s'utilitza per crear un enllaç que, quan es fa clic, portarà l'usuari a la pàgina especificada a l'atribut "a" (en aquest cas, "/about").
3. L'atribut activeClassName especifica quina classe s'ha d'aplicar quan l'enllaç està actiu (en aquest cas, "actiu").
Què és NavLink
NavLink és un component React utilitzat a React Router per crear un enllaç de navegació entre diferents rutes d'una aplicació. És similar al component Enllaç, però afegeix atributs d'estil a l'element representat quan coincideix amb l'URL actual. NavLink també proporciona un complement activeClassName que es pot utilitzar per aplicar un nom de classe quan la ruta de l'enllaç està activa.
Atribut activeClassName
L'atribut activeClassName a React Router s'utilitza per especificar un nom de classe que s'aplicarà a l'element quan coincideixi amb l'URL actual. Això és útil per dissenyar enllaços o elements de navegació quan coincideixen amb la ruta actual. També es pot utilitzar per afegir estils addicionals als elements que no estan directament relacionats amb l'encaminament, com ara ressaltar la pestanya activa actualment en una barra de navegació.
Per què activeClassName no funciona?
ActiveClassName és una característica de React Router que us permet afegir una classe a l'enllaç actiu en un menú de navegació. Malauradament, no funcionarà a React Router perquè es basa en l'API de l'historial del navegador, que no està disponible a React Router. Això vol dir que React Router no pot detectar quan un usuari ha fet clic en un enllaç i aplicar l'activeClassName en conseqüència.
