В ссылке реакт className задается в зависимости от состояния burgerActive, либо "logo active", либо "logo", но когда я запускаю код в лайвсервере, почему то именно у NavLink появляется лишний класс active (вне зависимости от burgerActive). Не понимаю откуда он взялся, пробовал даже просто присвоить className="", но active все равно остается на NavLink'е.
<NavLink
to={USERS_ROUTE}
className={burgerActive ? "logo active" : "logo"}
onClick={() => { setBurgerActive(false) }}>
USERS
</NavLink>
вот весь компонент:
import React, { useState } from 'react'
import { NavLink } from 'react-router-dom'
import { USERS_ROUTE, LOGIN_ROUTE, REGISTRATION_ROUTE } from './../utils/consts';
const NavBar = () => {
const [burgerActive, setBurgerActive] = useState(false)
return (
<header>
<div className={burgerActive ? "burger active" : "burger"} onClick={() => {
setBurgerActive(!burgerActive)
}}>
<span className={burgerActive ? "active" : ""}></span>
</div>
<div className="header">
<NavLink
to={USERS_ROUTE}
className={burgerActive ? "logo active" : "logo"}
onClick={() => { setBurgerActive(false) }}>
USERS
</NavLink>
<div className={burgerActive ? "main-header active" : "main-header"}>
<nav className={burgerActive ? "nav active" : "nav"}>
<NavLink
to={LOGIN_ROUTE}
className={burgerActive ? "nav__item nav__link active" : "nav__item nav__link"}
onClick={() => { setBurgerActive(false) }}>
LOGIN
</NavLink>
<NavLink
to={REGISTRATION_ROUTE}
className={burgerActive ? "nav__item nav__link active" : "nav__item nav__link"}
onClick={() => { setBurgerActive(false) }}>
REGISTRATION
</NavLink>
</nav>
</div>
</div>
</header >
)
}
export default NavBar
Вот скриншот класса при burgerActive=false(должно быть "logo"):
Когда burgerActive=true, то получается так:
Не знаю, откуда мог взяться этот класс, и как его убрать..