Peamine probleem, mis on seotud ActiveClassName'iga React Routeris, on see, et see ei värskenda marsruudi muutumisel automaatselt aktiivset klassi. See tähendab, et arendajad peavad aktiivset klassi käsitsi värskendama iga kord, kui marsruut muutub, mis võib olla aeganõudev ja veaohtlik. Lisaks, kui mitu marsruuti on üksteise sees, võib olla raske jälgida, milline marsruut on praegu aktiivne ja milliseid klasse tuleks igale elemendile rakendada.
<Router> <Link to="/about" activeClassName="active">About</Link> </Router>
1.
2. komponenti kasutatakse lingi loomiseks, millel klõpsamine viib kasutaja atribuudis "to" (antud juhul "/about") määratud lehele.
3. Atribuut activeClassName määrab, millist klassi tuleks rakendada, kui link on aktiivne (antud juhul "aktiivne").
Mis on NavLink
NavLink on Reacti komponent, mida kasutatakse React Routeris, et luua rakenduses erinevate marsruutide vahel navigeerimislink. See sarnaneb komponendiga Link, kuid lisab renderdatavale elemendile stiiliatribuudid, kui see ühtib praeguse URL-iga. NavLink pakub ka ActiveClassName propi, mida saab kasutada klassi nime rakendamiseks, kui lingi marsruut on aktiivne.
ActiveClassName atribuut
React Routeri atribuuti activeClassName kasutatakse klassi nime määramiseks, mida rakendatakse elemendile, kui see ühtib praeguse URL-iga. See on kasulik linkide või navigeerimisüksuste kujundamisel, kui need vastavad praegusele marsruudile. Seda saab kasutada ka täiendava stiili lisamiseks elementidele, mis ei ole otseselt marsruutimisega seotud, näiteks navigeerimisribal hetkel aktiivse vahekaardi esiletõstmiseks.
Miks ActiveClassName ei tööta?
ActiveClassName on React Routeri funktsioon, mis võimaldab teil lisada klassi navigeerimismenüü aktiivsele lingile. Kahjuks ei tööta see React Routeris, kuna see tugineb brauseri ajaloo API-le, mis pole React Routeris saadaval. See tähendab, et React Router ei suuda tuvastada, millal kasutaja on lingil klõpsanud, ja rakendada vastavalt ActiveClassName'i.
