Riješeno: ruter za reakciju activeClassName

Glavni problem povezan s activeClassName u React Routeru je taj što 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 pogreš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. komponenta se koristi za stvaranje usmjerivača u Reactu koji korisnicima omogućuje navigaciju između različitih stranica.

2. komponenta se koristi za stvaranje poveznice koja će, kada se klikne, odvesti korisnika na stranicu navedenu u atributu “to” (u ovom slučaju, “/o”).

3. ActiveClassName atribut specificira koja se klasa treba primijeniti kada je veza aktivna (u ovom slučaju, "aktivna").

Što je NavLink

NavLink je React komponenta koja se koristi u React Routeru za stvaranje navigacijske veze između različitih ruta u aplikaciji. Slična je komponenti veze, ali dodaje atribute stila prikazanom elementu kada odgovara trenutnom URL-u. NavLink također pruža potporu activeClassName koja se može koristiti za primjenu naziva klase kada je ruta veze aktivna.

atribut activeClassName

Atribut activeClassName u React Routeru koristi se za određivanje naziva klase koji će se primijeniti na element kada odgovara trenutnom URL-u. Ovo je korisno za oblikovanje veza ili navigacijskih stavki kada odgovaraju trenutnoj ruti. Također se može koristiti za dodavanje dodatnog stila elementima koji nisu izravno povezani s usmjeravanjem, kao što je isticanje trenutno aktivne kartice na navigacijskoj traci.

Zašto activeClassName ne radi

ActiveClassName je značajka React Routera koja vam omogućuje dodavanje klase aktivnoj vezi u navigacijskom izborniku. Nažalost, neće raditi u React Routeru jer se oslanja na API povijesti preglednika, koji nije dostupan u React Routeru. To znači da React Router ne može otkriti kada je korisnik kliknuo na poveznicu i primijeniti activeClassName u skladu s tim.

Povezani postovi:

Ostavite komentar