Question

我正在尝试将我的值从字典映射到 NavLink 字段。出于某种原因，这种确切的方法与 react Button 完美配合，但与 NavLink 一起使用时则不行。

我的字典的键和值是包含 2 个值的列表：名称和 URL。例如

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

我正在使用这个函数映射到我的 NavLink

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

虽然这适用于我的 Button 映射，但当我尝试使用 NavLink 时，我收到了这个奇怪的 href 错误，我没有使用与 Button 完全相同的代码获得此错误

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 组件需要 to 属性而不是 href。

<NavLink ... to={key[1]}>...</NavLink>

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

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

1 个答案: