Galvenā problēma, kas saistīta ar ActiveClassName programmā React Router, ir tā, ka tā automātiski neatjaunina aktīvo klasi, kad maršruts mainās. Tas nozīmē, ka izstrādātājiem ir manuāli jāatjaunina aktīvā klase ikreiz, kad mainās maršruts, un tas var būt laikietilpīgi un ar kļūdu iespējamību. Turklāt, ja vairāki maršruti ir ligzdoti viens otrā, var būt grūti izsekot, kurš maršruts pašlaik ir aktīvs un kādas klases jāpiemēro katram elementam.
<Router> <Link to="/about" activeClassName="active">About</Link> </Router>
1.
2. komponents tiek izmantots, lai izveidotu saiti, uz kuras noklikšķinot, lietotājs tiks novirzīts uz lapu, kas norādīta atribūtā “to” (šajā gadījumā “/about”).
3. Atribūts activeClassName norāda, kura klase ir jāpiemēro, kad saite ir aktīva (šajā gadījumā “aktīva”).
Kas ir NavLink
NavLink ir React komponents, ko izmanto React Router, lai lietojumprogrammā izveidotu navigācijas saiti starp dažādiem maršrutiem. Tas ir līdzīgs komponentam Saite, taču tas renderētajam elementam pievieno stila atribūtus, kad tas atbilst pašreizējam URL. NavLink nodrošina arī ActiveClassName rekvizītu, ko var izmantot, lai lietotu klases nosaukumu, kad saites maršruts ir aktīvs.
ActiveClassName atribūts
Atribūts activeClassName programmā React Router tiek izmantots, lai norādītu klases nosaukumu, kas tiks lietots elementam, kad tas atbilst pašreizējam URL. Tas ir noderīgi, lai veidotu saites vai navigācijas vienumus, kad tie atbilst pašreizējam maršrutam. To var arī izmantot, lai pievienotu papildu stilu elementiem, kas nav tieši saistīti ar maršrutēšanu, piemēram, lai navigācijas joslā iezīmētu pašlaik aktīvo cilni.
Kāpēc ActiveClassName nedarbosies
ActiveClassName ir React Router līdzeklis, kas ļauj pievienot klasi aktīvajai saitei navigācijas izvēlnē. Diemžēl tas nedarbosies React Router, jo tas paļaujas uz pārlūkprogrammas vēstures API, kas nav pieejama React Router. Tas nozīmē, ka React Router nevar noteikt, kad lietotājs ir noklikšķinājis uz saites, un attiecīgi lietot ActiveClassName.
