项目修改自 上一节 的 Demo
-
这里需要注意的变化
-
默认高亮样式类名如果依然是
active
则依然默认有效 -
6 里移除了
activeClassName
,如果我的高亮样式类名是peiqi
,需要配置 className 为一个函数-
函数接收两个参数
- isActive:是否激活
- isPending:是否
-
.peiqi{ background: orange; } <NavLink className={({ isActive }) => isActive ? 'list-group-item peiqi' : 'list-group-item'} to="/about" >About</NavLink>
-
路由有很多的话写着很麻烦,可以优化如下:
-
const activeClassName = ({isActive}) => isActive ? 'list-group-item peiqi' : 'list-group-item' <NavLink className={activeClassName} to="/about" >About</NavLink>
-
Result
-
-