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定义中是否有办法说，如果传入的路由与当前位置匹配，则添加特定的类？

React Link-如果在Route中传递了位置匹配的信息，请申请课程？

0 个答案: