react-router-dom中NavLink中activeClassName和className

本文转载自查看原文 2021-12-08 20:55 151

在我进行练习点击高亮事件的时候发现activeClassName并不能在类的后面添加另一个类，然后经过搜索发现activeClassName已经被废除了

在新的语法中，添加高亮事件

<NavLink className={({ isActive }) =>isActive ? "light" : ""} to="/about" >About</NavLink>

注意：在light前面需要添加一个空格，不然两个类名拼接在一起就不能触发高亮效果

<NavLink className={({ isActive }) => "list-group-item" + (isActive ? " light" : "")} to="/about" >About</NavLink>

需要在className中添加一个回调函数

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 react-router-dom中link与Navlink react-router-dom中Switch和exact React 中 Link 和 NavLink 组件 activeClassName、activeStyle 属性不生效的问题使用react-router-dom中BrowserRouter不跳转问题 react 路由使用react-router-dom react 路由react-router 及react-router-dom的区别 'Switch' is not exported from 'react-router-dom' react-router-dom v4 react-router-dom之 history用法 'Redirect' is not exported from 'react-router-dom'