Navlink как поменять цвет нажатой ссылки?

Question

[Ca1doz]

Я хочу чтобы при нажатии на ссылку, её цвет менялся и оставался таким же. Но после нажатия на уже другую, она меняла цвет, а прошлая ссылка опять становилась прежней.

JSX:

<nav className={classes.nav}>
            <div className={classes.item}>
                <NavLink to="/profile" activeClassName={classes.active}>Profile</NavLink>
            </div>
            <div className={classes.item}>
                <NavLink to="/dialogs"activeClassName={classes.active}>Messages</NavLink>
            </div>
</nav>

CSS:

.nav {
    grid-area: n;
    background-color: lightslategrey;
}

.item a {
    color: white;
    font-size: 25px;
}

Подскажите пожалуйста как это описать в CSS?

Comments

[imko]

класс каой-нибудь (обычно это называют active :D) снимать со всех ссылок при нажатии и добавлять ток нажатой

[Ca1doz]

Я попытался добавить в CSS

.active {
color:gold
}

но не помогло

[Удивленный Котейка]

activeClassName={classes.active} тебе здесь нужно написать имя класса строкой activeClassName="active"

а потом в цсс добавить стили для .active{...}

[Ca1doz]

Не помогло. Не знает поможет ли, но у меня module.css

[Удивленный Котейка]

<nav className={classes.nav}>
            <div className={classes.item}>
                <NavLink to="/profile" activeClassName="active">Profile</NavLink>
            </div>
            <div className={classes.item}>
                <NavLink to="/dialogs"activeClassName="active">Messages</NavLink>
            </div>
</nav>


.item  a.active{
    color: red; 
}

попробуй так

[Ca1doz]

Попробовал, не помогло. Точно также я нажимаю и цвет не меняется

[Удивленный Котейка]

Ca1doz, не может быть а у тебя это работает?

.item a {
    color: white;
    font-size: 25px;
}

[Удивленный Котейка]

попробуй еще раз скоприуй это

.item  a.active{
    color: red; 
}

и удали activeClassName из Навлинков, они по умолчанию должны устанавливать класс active

[Ca1doz]

Удивленный Котейка, .item a работает, меняются все ссылки на белый

[Ca1doz]

Удивленный Котейка, попробовал .item a.active
Не работает

[Ca1doz]

Удивленный Котейка, https://github.com/Ca1doz/JS-React/tree/20-коммит

Залил на гитхаб, можешь глянуть.
Может это я конечно что-то не так делаю ахах

Answer 1

[zorca]

visited же: a:visited {}

Answer 2

[Алексей Абрамов]

Я так понимаю, у вас 6 версия роутера. Теперь нужно делать так

<NavLink
  to="/profile"
- activeClassName={classes.active}
+ className={({ isActive }) => (isActive ? classes.active : '')}
>
  Messages
</NavLink>