Есть навбар со ссылками
const Navbar = () => {
return <nav className={s.nav}>
<div className={s.item}>
<NavLink to="/profile" activeClassName={s.activeLink}>My Profile</NavLink>
</div>
<div className={s.item}>
<NavLink to="/dialogs" activeClassName={s.activeLink}>Messages</NavLink>
</div>
</nav>
}
Стиль к активным ссылкам:
.nav {
grid-area: nav;
background-color: #f0f2f5;
padding: 20px;
}
.item {
color: black;
}
.item a {
color: black;
text-decoration: none;
}
.item a.activeLink {
color: darkred;
}
Проблема в версии реакт роутер дом, она вот такая "react-router-dom": "^6.0.0"
В документации нашла, что именно в шестой версии такой код не сработает, но не понимаю, как сделать так, чтобы активная ссылка стилизовалась.
Вот текст из документации: In React Router v6, activeClassName will be removed and you should use the function className to apply classnames to either active or inactive NavLink components. и я так понимаю, пример
<NavLink
to="/faq"
className={isActive =>
"nav-link" + (!isActive ? " unselected" : "")
}
>
FAQs
</NavLink>
Но вот понять не могу, как сделать. Даже видео с индусами не помогло :)