react router v6 isActive未更新样式

Question

升级到react router v6后，当NavLink处于活动状态时，更新其样式存在问题。

代码如下:

{siteLinks.map({ href, name }) => {
return (
<NavLink
key={href}
to={href}
style={({ isActive }) => ({
backgroundColor: isActive ? 'gray' : 'transparent',
})}
>
<p>{name}</p>
</NavLink>
}

当我检查元素时，我看到a标签具有active类名，但style没有被拾取。

如果我改成下面的，它们都显示为gray

<NavLink
key={href}
to={href}
style={{ backgroundColor: 'gray' }}
>

Answer 1

试试用className

className={({ isActive }) =>
isActive  
? someClass
: someOtherClass
}