React Link - Если совпадения местоположения переданы в Route, применить класс?

Question

У меня есть этот общий компонент, который вызывает SidebarLink:

<SidebarGroup>
  <SidebarLink>
    <Link to={routes.example1.path}>example1</Link>
  </SidebarLink>
  <SidebarLink>
    <Link to={routes.example2.path}>example2</Link>
  </SidebarLink>
</SidebarGroup>

SidebarLink записывается так:

const SidebarLink = ({ children }) => (
  <li className={styles.sidebarLink}>
    {children}
  </li>
);

Со следующими стилями (показаны только те, которые связаны с вопросом:

.sidebarLink a:hover, .sidebarLink a:active {
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
}

.sidebarLink:active:after {
  content: url('./chevron.svg');
  position: absolute;
  right: -10px;
}

, который добавляет некоторые общие стили, которые должны применяться при наведении (которые применяются правильно), и изображение стрелки, которое должно появляться, когда элемент активен.ожидается, когда вы щелкаете и удерживаете SidebarLink - однако, когда вы фактически отпускаете щелчок и он переходит к целевому URL, стили :active исчезают, и изображение следует за ним - даже при наличии активной вкладки / пункта меню.

Я пытался использовать NavLink вместо Link вместе со свойством activeClassName, но, похоже, это не имеет значения.

Есть ли способвозможно, скажем, в определении SidebarLink, если маршрут, который передается в соответствии с текущим местоположением, добавить определенный класс?