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

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