在react-router-dom中为我们提供了一个NavLink的组件,组建中含有一个名为activeClassName的属性,可以很方便的为我们提供路由切换时的选中效果
NavLink
使用NavLink时,其用法与Link无太大区别,在需要实现点击切换className时,可以用NavLink代替Link简化操作,并将需要点击后激活的ClassName值放到NavLink标签的activeClassName中即可,比如下方代码中让 li 标签点击后激活active-menu的class值
<li>
<NavLink to="/" activeClassName='active-menu'>
<i className="fa fa-dashboard"></i>
<span>首页</span>
</NavLink>
</li>
NavLink的原理是根据当前的路径来匹配NavLink中的to的值,匹配成功是就将activeClassName中的值添加到当前标签的className里,因而需要进行精确匹配以防显示bug