Не добавляется стиль в активный NavLink (React)

Question

Есть навбар со ссылками

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>

Но вот понять не могу, как сделать. Даже видео с индусами не помогло :)

Answer 1

Я не понял как это сделать через модули, но там есть пример, как сделать свой NavLink и он работает

import * as React from "react";
import { NavLink as BaseNavLink } from "react-router-dom";

const NavLink = React.forwardRef(
  ({ activeClassName, activeStyle, ...props }, ref) => {
    return (
      <BaseNavLink
        ref={ref}
        {...props}
        className={({ isActive }) =>
          [
            props.className,
            isActive ? activeClassName : null
          ]
            .filter(Boolean)
            .join(" ")
        }
        style={({ isActive }) => ({
          ...props.style,
          ...(isActive ? activeStyle : null)
        })}
      />
    );
  }
);

export default NavLink;

Answer 2

<NavLink to='/quotes' className={({isActive}) =>`${isActive ? s.active : ''}`}>

Вот это Вам поможет.

Answer 3

не лучшее решение, но мне было удобно сделать так:

link у меня это то что внутри to={'/'}

className={({ isActive }) => isActive && window.location.pathname === link ? 'active' : 'inactive'}

БЛОГ НА HUSL

Не добавляется стиль в активный NavLink (React)

Ответы (3 шт):