Zgjidhur: router react ActiveClassName

Problemi kryesor që lidhet me ActiveClassName në React Router është se ai nuk përditëson automatikisht klasën aktive kur ndryshon rruga. Kjo do të thotë që zhvilluesit duhet të përditësojnë manualisht klasën aktive sa herë që ndryshon një rrugë, gjë që mund të marrë kohë dhe të prirur ndaj gabimeve. Për më tepër, nëse shumë rrugë janë të ndërthurura brenda njëra-tjetrës, mund të bëhet e vështirë të mbash gjurmët se cila rrugë është aktualisht aktive dhe cilat klasa duhet të aplikohen për secilin element.

<Router>
  <Link to="/about" activeClassName="active">About</Link>
</Router>

1. komponenti përdoret për të krijuar një ruter në React që lejon përdoruesit të lundrojnë midis faqeve të ndryshme.

2. komponenti përdoret për të krijuar një lidhje që kur klikohet, do ta çojë përdoruesin në faqen e specifikuar në atributin "për" (në këtë rast, "/about").

3. Atributi activeClassName specifikon se cila klasë duhet të aplikohet kur lidhja është aktive (në këtë rast, "aktive").

Çfarë është NavLink

NavLink është një komponent React i përdorur në React Router për të krijuar një lidhje navigimi midis rrugëve të ndryshme në një aplikacion. Është i ngjashëm me komponentin Link, por shton atribute stilimi në elementin e dhënë kur përputhet me URL-në aktuale. NavLink ofron gjithashtu një mbështetëse ActiveClassName e cila mund të përdoret për të aplikuar një emër klase kur rruga e lidhjes është aktive.

Atributi aktivClassEmri

Atributi activeClassName në React Router përdoret për të specifikuar një emër klase që do të aplikohet në element kur të përputhet me URL-në aktuale. Kjo është e dobishme për stilimin e lidhjeve ose artikujve të navigimit kur ato përputhen me itinerarin aktual. Mund të përdoret gjithashtu për të shtuar stilim shtesë në elementë që nuk lidhen drejtpërdrejt me drejtimin, si p.sh. theksimi i skedës aktualisht aktive në një shirit navigimi.

Pse nuk funksionon ActiveClassName

ActiveClassName është një veçori e React Router që ju lejon të shtoni një klasë në lidhjen aktive në një menu navigimi. Fatkeqësisht, nuk do të funksionojë në React Router sepse mbështetet në API të historisë së shfletuesit, i cili nuk është i disponueshëm në React Router. Kjo do të thotë që React Router nuk mund të zbulojë kur një përdorues ka klikuar në një lidhje dhe të aplikojë në përputhje me rrethanat ActiveClassName.