1

В ссылке реакт 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, то получается так: введите сюда описание изображения

Не знаю, откуда мог взяться этот класс, и как его убрать..

1
  • используйте библиотеку classnames.
    – xydope
    3 мая 2022 в 11:54

1 ответ 1

0

2й active по умолчанию у NavLink стоит

3
  • 1
    постарайтесь оставлять чуть более развёрнутые ответы. 20 июл 2022 в 9:22
  • напишите комментарий вместо ответа
    – tohatsu
    20 июл 2022 в 10:02
  • Один класс active вы добавили тут: <NavLink to={USERS_ROUTE} className={burgerActive ? "logo active" : "logo"} onClick={() => { setBurgerActive(false) }}> USERS </NavLink> Второй класс active добавляется автоматически компонентой <NavLink> 10 сен 2022 в 13:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.