Question

我的应用中有锚链接。如果anchor link处于活动状态，如何使活动样式有效。

<NavLink
  to="/#somewhere"
  activeClassName="selected"
>AnchorLink</NavLink>

Answer 1

为了设置当前活动链接的样式，您可以为参数activeClassName中提供的类提供样式，但它不适用于散列URL，但对于活动类，我们可以将location.hash与散列名称进行比较

示例：

<li>
          <Link className={location.hash == "#about" ? "active" : ""} to='#about'>
          About
        </Link>
        </li>
        <li>
          <Link className={location.hash == "#user" ? "active" : ""} to='#user'>
          User
        </Link>
        </li>
        <li>
          <Link className={location.hash == "#repo" ? "active" : ""} to='#repo'>
          Repository
        </Link>
</li>

因此，对于此示例，我们提供了样式

.active {
  font-weight: bold;
}

因此字体仅对当前处于活动状态的链接为粗体。

React router v4 active anchor link

1 个答案: