Pagrindinė problema, susijusi su ActiveClassName React Router, yra ta, kad ji automatiškai neatnaujina aktyvios klasės, kai pasikeičia maršrutas. Tai reiškia, kad kūrėjai turi rankiniu būdu atnaujinti aktyvią klasę, kai pasikeičia maršrutas, o tai gali užtrukti ir sukelti klaidų. Be to, jei keli maršrutai yra vienas kitame, gali būti sunku sekti, kuris maršrutas šiuo metu yra aktyvus ir kokios klasės turėtų būti taikomos kiekvienam elementui.
<Router> <Link to="/about" activeClassName="active">About</Link> </Router>
1.
2. komponentas naudojamas sukurti nuorodai, kurią spustelėjus, vartotojas bus nukreiptas į puslapį, nurodytą atribute „to“ (šiuo atveju „/apie“).
3. Atributas activeClassName nurodo, kokia klasė turi būti taikoma, kai nuoroda yra aktyvi (šiuo atveju „aktyvi“).
Kas yra NavLink
„NavLink“ yra „React“ komponentas, naudojamas „React Router“, kad būtų sukurta navigacijos nuoroda tarp skirtingų programos maršrutų. Jis panašus į nuorodos komponentą, bet prideda stiliaus atributų į pateiktą elementą, kai jis atitinka dabartinį URL. „NavLink“ taip pat teikia aktyviosios klasės pavadinimo rekvizitą, kurį galima naudoti klasės pavadinimui pritaikyti, kai nuorodos maršrutas yra aktyvus.
ActiveClassName atributas
React Router atributas activeClassName naudojamas nurodyti klasės pavadinimą, kuris bus taikomas elementui, kai jis atitiks dabartinį URL. Tai naudinga formuojant nuorodas arba navigacijos elementus, kai jie atitinka esamą maršrutą. Jis taip pat gali būti naudojamas norint pridėti papildomą stilių elementams, kurie nėra tiesiogiai susiję su maršruto parinkimu, pvz., paryškinti šiuo metu aktyvų skirtuką naršymo juostoje.
Kodėl „activeClassName“ neveiks
ActiveClassName yra „React Router“ funkcija, leidžianti pridėti klasę prie aktyvios nuorodos naršymo meniu. Deja, „React Router“ jis neveiks, nes remiasi naršyklės istorijos API, kuri nepasiekiama „React Router“. Tai reiškia, kad „React Router“ negali aptikti, kada vartotojas spustelėjo nuorodą, ir atitinkamai pritaikyti ActiveClassName.
