Solvita: activeClassName-reaga enkursigilo

La ĉefa problemo rilata al activeClassName en React Router estas, ke ĝi ne aŭtomate ĝisdatigas la aktivan klason kiam la itinero ŝanĝiĝas. Ĉi tio signifas, ke programistoj devas permane ĝisdatigi la aktivan klason kiam ajn itinero ŝanĝiĝas, kio povas esti tempopostula kaj eraro-inklina. Aldone, se pluraj itineroj estas nestitaj unu en la alia, povas iĝi malfacile konservi trakon de kiu itinero estas nuntempe aktiva kaj kiaj klasoj devus esti aplikitaj al ĉiu elemento.

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

1. la komponanto estas uzata por krei enkursigilon en React, kiu permesas al uzantoj navigi inter malsamaj paĝoj.

2. la komponanto estas uzata por krei ligilon, kiu, kiam oni klakas, kondukos la uzanton al la paĝo specifita en la atributo "al" (en ĉi tiu kazo, "/pri").

3. La atributo activeClassName specifas, kian klason devas esti aplikata kiam la ligilo estas aktiva (en ĉi tiu kazo, "aktiva").

Kio estas NavLink

NavLink estas React-komponento uzata en React Router por krei navigacian ligon inter malsamaj itineroj en aplikaĵo. Ĝi similas al la Link-komponento, sed ĝi aldonas stilajn atributojn al la bildita elemento kiam ĝi kongruas kun la nuna URL. NavLink ankaŭ disponigas activeClassName-apogilon kiu povas esti uzita por apliki klasnomon kiam la itinero de la ligo estas aktiva.

atributo activeClassName

La atributo activeClassName en React Router estas uzata por specifi klasnomon, kiu estos aplikita al la elemento kiam ĝi kongruas kun la nuna URL. Ĉi tio utilas por stiligi ligilojn aŭ navigadajn erojn kiam ili kongruas kun la nuna itinero. Ĝi ankaŭ povas esti uzata por aldoni plian stilon al elementoj, kiuj ne rekte rilatas al vojigo, kiel reliefigi la nuntempe aktivan langeton en navigadbreto.

Kial activeClassName ne funkcios

ActiveClassName estas trajto de React Router, kiu permesas vin aldoni klason al la aktiva ligilo en navigada menuo. Bedaŭrinde, ĝi ne funkcios en React Router ĉar ĝi dependas de la historia API de la retumilo, kiu ne haveblas en React Router. Ĉi tio signifas, ke React Router ne povas detekti kiam uzanto klakis sur ligilo kaj apliki la aktivan Klasnomon laŭe.

Rilataj afiŝoj:

Lasu komenton