阵营路由器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; 
} 

这样的字体将是大胆仅用于链路当前活动。