javascript - React router v4 主动 anchor 链接

Question

我的应用中有 anchor 链接。如果 anchor 链接处于事件状态，如何使事件样式发挥作用。

<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;
}

因此，只有当前事件的链接的字体才会显示为粗体。