陣營路由器V4活躍錨鏈接

Question

我錨鏈接在我的應用程序。如果anchor link處於活動狀態，如何使活動樣式有效。

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

Answer 1

對於造型當前激活鏈接，你可以給樣式到在參數activeClassName提供的類，但它不與哈希網址的工作，但對於活動類，我們可以用我們的散列的名字比較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; 
} 

這樣的字體將是大膽僅用於鏈路當前活動。