Hlavním problémem souvisejícím s activeClassName v React Router je to, že automaticky neaktualizuje aktivní třídu, když se trasa změní. To znamená, že vývojáři musí ručně aktualizovat aktivní třídu při každé změně trasy, což může být časově náročné a náchylné k chybám. Navíc, pokud je do sebe vnořeno více tras, může být obtížné sledovat, která trasa je aktuálně aktivní a jaké třídy by měly být použity pro každý prvek.
<Router> <Link to="/about" activeClassName="active">About</Link> </Router>
1.
2. komponenta slouží k vytvoření odkazu, na který se po kliknutí dostane uživatel na stránku specifikovanou v atributu „to“ (v tomto případě „/about“).
3. Atribut activeClassName určuje, jaká třída by měla být použita, když je odkaz aktivní (v tomto případě „aktivní“).
Co je NavLink
NavLink je komponenta React používaná v React Router k vytvoření navigačního propojení mezi různými trasami v aplikaci. Je podobná komponentě Link, ale přidává atributy stylu k vykreslenému prvku, když odpovídá aktuální adrese URL. NavLink také poskytuje podporu activeClassName, kterou lze použít k použití názvu třídy, když je trasa odkazu aktivní.
atribut activeClassName
Atribut activeClassName v React Router se používá k určení názvu třídy, který bude použit na prvek, když bude odpovídat aktuální adrese URL. To je užitečné pro stylování odkazů nebo položek navigace, když odpovídají aktuální trase. Lze jej také použít k přidání dalších stylů do prvků, které přímo nesouvisejí s trasováním, jako je zvýraznění aktuálně aktivní karty v navigační liště.
Proč nefunguje activeClassName
ActiveClassName je funkce React Router, která vám umožňuje přidat třídu k aktivnímu odkazu v navigační nabídce. Bohužel to nebude fungovat v React Router, protože se spoléhá na rozhraní API historie prohlížeče, které není v React Router k dispozici. To znamená, že React Router nemůže zjistit, kdy uživatel klikl na odkaz, a podle toho použít název activeClassName.
