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

因此，字體僅對於當前處於活動狀態的鏈接為粗體。