react/react-router-dom/ не работают activeClassName

Перестали работать activeClassName. Насколько я понял в v6 они теперь реализуются по другому

Было:

<NavLink activeClassName="active" to="/about" />

Стало:

<NavLink className={(navData) => navData.isActive ? "active" : "" } to="/about" />

Помогите решить проблему с модулями, я использую модули CSS Импортирую как "s"введите сюда описание изображения

у меня есть класс для активной ссылки "link" Как я могу поставить класс не "green", а как выражение например {s.link}


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

Автор решения: an_parubets
import React from 'react';
import { NavLink } from 'react-router-dom';
import styles from './styles.module.css';

const MyLink = () => (
  <NavLink
    to="/my-route"
    className={({ isActive }) =>
      isActive ? styles.active : undefined
    }
  >
    My route
  </NavLink>
);
→ Ссылка