React Navlink：ISACTIVE函数thrws＆＃x27; String无法分配到类型字符串|未定义＆＃x27;

Question

我定义了用于造型活动链接的NAVLinks。

例如，我尝试了这种方法的几种方法：

<NavLink to="contact" className={({ isActive }) => (isActive ? 'nav-links-active' : 'nav-links')}>
      Contact
</NavLink>

这是不起作用的，IDE返回：

type函数（{isActive：any}）：string |字符串无法分配到类型字符串|未定义字符串不能分配到类型字符串，

我必须在某个地方定义ISARTIVE吗？我在做什么错？

Answer 1

使用ActiveClassName。您可以简单地执行此操作：

<NavLink to="contact" activeClassName='nav-links-active' className='nav-links'>
      Contact
</NavLink>

但是它在React-Router-Dom V5中起作用。它不再存在于V6中。有关更多详细信息请参阅文档

Answer 2

默认情况下，一个活动类是在组件中添加
是活跃的。这为大多数人提供了相同的简单造型机制
从V5升级的用户。 v6.0.0-beta.3的一个区别是
ActiveClassname和Activestyle已从
navlinkprops。相反，您可以将功能传递给样式或
ClassName将允许您自定义内联样式或
基于组件的活动状态的类字符串。你也可以通过
作为孩子的功能，可以自定义
组件基于其活跃状态，特别可更改
内部元素的样式。

Answer 3

className不接受回调功能。如果ISACTIVE一个变量或状态，则可以执行此操作：

<NavLink to="contact" className={isActive ? 'nav-links-active' : 'nav-links'}>
      Contact
</NavLink>