我的应用中有 锚 链接。如果anchor link
处于活动状态,如何使活动样式有效。
<NavLink
to="/#somewhere"
activeClassName="selected"
>AnchorLink</NavLink>
答案 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;
}
因此字体仅对当前处于活动状态的链接为粗体。