Реактивный маршрутизатор NavLink активный атрибут вместо activeClassName

Question

Есть ли способ установить активное состояние в атрибуте active вместо activeClassName в React Router NavLink?По определенной причине он должен быть в активном состоянии.В NavLink есть функция isActive, которая, я думаю, может быть полезна для достижения того, что мне нужно.Но пока у меня нет результата.Я думал о чем-то похожем ниже, но это не работает.

Что я пробовал:

const abc = (match, location) => {
  return match;
}
<NavLink to="/faq" isActive={abc} active={props.isActive ? "true" : null}>
  FAQs
</NavLink>

Answer 1

Не очень ясно, чего вы пытаетесь достичь, но это мое лучшее предположение: вы хотите каким-то образом узнать, активен ли NavLink или нет.

По умолчанию активен NavLinkесли он соответствует URL, который вы указали в to.Вы можете сделать эту проверку вручную, используя метод matchPath, предоставляемый React Router:

import { matchPath } from "react-router";

const toUrl = '/faq';

const isActive = matchPath(toURL, {
  path: this.props.match.path,
});

<NavLink to={toUrl}>
  FAQs
</NavLink>

Это проверит, что текущий путь соответствует "/ faq".Теперь у вас есть переменная isActive, которая имеет значение true, когда NavLink активен, и false, когда неактивна.Вы можете использовать это для чего угодно.

Я не уверен, чего вы пытались достичь с помощью active, но это недопустимая поддержка для NavLink.