四、【React-Router6】高亮 NavLink

项目修改自 上一节 的 Demo

• 这里需要注意的变化

• <NavLink end> end 属性表示子路由高亮时此路由不再高亮

  • 默认高亮样式类名如果依然是 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