来自字典的React-NavLink href映射不起作用？

Question

我正在尝试将我的值从字典映射到NavLink字段。出于某种原因，这种精确的方法与react按钮完美配合使用，但与NavLink配合使用时却无法实现。

我的字典有键和值，它们是包含两个值的列表：Name和URL。例如

const links = {
    key1: ["key1Name", "key1URL"],
    key2: ["key2Name", "key2URL"]
}

我用这个函数映射到我的导航链接

{Object.values(links).map((key, index) => ( 
    <div className="centered">
        <NavLink className="splashButton" href={key[1]}>{key[0]}</NavLink>
    </div>
))}

虽然这适用于我的按钮映射，当我尝试使用NavLink时，我得到了这个奇怪的错误，我没有得到与按钮相同的确切代码

No overload matches this call.
  Overload 1 of 2, '(props: NavLinkProps | Readonly<NavLinkProps>): NavLink<unknown>', gave the following error.
    Type 'string | Element' is not assignable to type 'string | undefined'.
      Type 'Element' is not assignable to type 'string'.
  Overload 2 of 2, '(props: NavLinkProps, context: any): NavLink<unknown>', gave the following error.
    Type 'string | Element' is not assignable to type 'string | undefined'.ts(2769)

index.d.ts(1933, 9): The expected type comes from property 'href' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<NavLink<unknown>> & Readonly<NavLinkProps> & Readonly<...>'
index.d.ts(1933, 9): The expected type comes from property 'href' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<NavLink<unknown>> & Readonly<NavLinkProps> & Readonly<...>'

有人知道为什么会发生这种情况，以及我如何解决这个问题吗？

Answer 1

NavLink组件需要一个toprop，而不是href。

js prettyprint-override"><NavLink ... to={key[1]}>...</NavLink>

参考：https://reactrouter.com/web/api/NavLink