React router v4 active anchor link

时间:2017-11-25 17:32:27

标签: javascript reactjs react-router

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

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

1 个答案:

答案 0 :(得分:0)

为了设置当前活动链接的样式,您可以为参数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;
}

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