如何使用 NavLinkv6 TypeScript？答案

【问题标题】：How to use NavLinkv6 TypeScript?如何使用 NavLinkv6 TypeScript？
【发布时间】：2021-12-20 18:45:29
【问题描述】：

我正在将 TypeScript 与新版本的 ReactRouter 一起使用。

当我尝试使用带有 className 和 style 属性的回调时，这会返回一个 typeError。

'({ isActive }: { isActive: any; }) => { color: string; 类型的值 }' 与类型 'Properties

<NavLink
            style={({ isActive }) => ({
              color: isActive ? "green" : "blue",
            })}
            to="/"
 >

【问题讨论】：

您是否已将您的@types/react-router-dom 软件包更新到支持新类型的最新版本？
NPM官网最新版本是5.3.2 :(
类型定义版本不遵循包版本。升级到5.3.2，您将解决您的问题。你可以在这里验证：github.com/DefinitelyTyped/DefinitelyTyped/blob/…。
但是我已经在使用那个版本了
根据你的错误信息，你不是。

【解决方案1】：

我正在使用带有类型定义的 react-router-dom 6。

您可以将类型添加到道具中。

虽然我不确定我们为什么需要这样做。也许有人可以解释为什么。

${({isActive}: {isActive: Boolean;}) => (isActive ? "red" : "blue")}`}

【讨论】：