React 路由器 v4 主动锚链接

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

所以字体只会对当前活动的链接加粗。