Javascript 反应链接-如果位置与路由中传递的位置匹配，是否应用类？

我有一个通用组件，叫做侧边栏链接：

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

它附加了一些应在悬停时应用的常规样式（正确应用），以及当项目处于活动状态时应显示的箭头图像。当你点击并按住一个侧边栏链接时，它是正确的，正如预期的那样——然而，当你实际释放点击并跟随到目标URL时，

：active

样式消失，图像也随之消失——即使有一个活动的选项卡/菜单项

我尝试使用

NavLink

而不是

Link

以及

activeClassName

属性，但这似乎没有什么区别

---

是否有一种方法可以说，在侧边栏链接定义中，如果传入的路由与当前位置匹配，则添加一个特定的类？

您是否尝试将

侧边栏组

包装到

withRouter（侧边栏组）

activeClassName

应该在这之后工作。不幸的是，使用路由器应用

似乎没有任何影响，整个应用程序都被包装在
BrowserRouter
中，因此我认为这不是问题。正确的方法包括
activeClassName
正常工作，所以我认为你不应该放弃修理它。你能链接到一个我可以修改代码的例子吗？我实际上意识到我是从
ReactStrap
中拉
NavLink
，而不是
react-router-dom
——这允许
to
和
activeClassName
属性按预期工作
activeClassName
应用于两个菜单项，而不仅仅是活动选项卡上的菜单项，但是。。。进步！谢谢你的帮助！：）
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;
}