React Router V6 ISACTIVE不更新样式

Question

升级到React Route 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> active className，但style未被选中向上。

如果我更改以下内容，它们都显示为灰色

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

Answer 1

尝试使用className

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