使用react-router-dom中的＜NavLink＞activeClassName报错

需求：点击对应按钮实现高亮

 报错代码：

demo是高亮对应的样式类名

<NavLink activeClassName="demo" className="list-group-item" to="/about">About</NavLink>
<NavLink activeClassName="demo" className="list-group-item" to="/home">Home</NavLink>

报错信息：

说react不认识小驼峰写法的activeClassName属性，建议改成小写，改成小写activeclassname之后不再报错，但是样式并不生效。

后发现是因为我的react-router-dom版本为最新版：6.0.2：

新版本里已经不再采用activeClassName属性来实现NacLink的高亮显示，改为直接在className中以回调函数的方式实现。

改为以下代码即可：

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

注意："demo"前要加一个空格，否则当点击按钮触发active状态时会返回"list-group-itemdemo"（字符串拼接，不加空格则前后类名会连在一起）导致css样式不生效。