NavLink всегда получает активный класс по запросу

Question

Я хочу добавить для activeClassName в NavLink.

<NavLink exact to="/" activeClassName="main-category-item-active"> .... </NavLink>
<NavLink to="/?tab=1" activeClassName="main-category-item-active"> .... </NavLink>
<NavLink to="/?tab=2" activeClassName="main-category-item-active"> .... </NavLink>

Но результат выглядит примерно так.

введите описание изображения здесь

Думаю, это потому, что путь - это запрос. Как мне это сделать?

Answer 1

Существует нет поддержки для обработки строк запроса React router v4 и выше.

В качестве альтернативы вы можете использовать простой компонент-оболочку и использовать isActive для определения активность-логи c.

// simple wrapper component for NavLink
const PathNavLink = (props) => (
  <NavLink isActive={(_, { pathname }) => pathname == props.to} {...props} />
);

// usage
<PathNavLink exact to="/" activeClassName="main-category-item-active"> .... </PathNavLink>