React/NextJS 路由道具到孙子的 Link 组件不起作用答案

【问题标题】：React/NextJS routing prop to a grandchild's Link component not workingReact/NextJS 路由道具到孙子的 Link 组件不起作用
【发布时间】：2021-12-26 00:58:54
【问题描述】：

我有点卡住了……不知道这是否是 NextJS 的问题。

我有三个组件：

CardsList（列出所有卡片 - 有多个 <Card> 孩子）
卡（卡的表示 - 有一个 <Button> 子级）
按钮（在卡片中显示按钮 - 使用 <Link> 组件）

Button 组件包含一个 nextjs/link 组件。

我需要通过 Card 将文章的链接从 CardsList 传递到 Button（并在此处传递到我的<Link>'s href）...

如果我将链接（例如 /mytest）直接从 Card 传递到 Button，这将非常有效......当我从 CardsList 路由它时，它还会显示字符串，通过 Card 到按钮只是为了在屏幕上打印它 - 是的，我可以看到它的价值......但是当我这样做时它不起作用：

export default function Button({ text, link }) {
  return (
    <Link href={link} passHref>
      <button className="bg-transparent hover:bg-primary text-link font-semibold hover:text-white py-1 px-3 border border-link hover:border-transparent rounded self-center" >
        {text}
      </button>
    </Link>
  );
}

是的，{text} 有效 - 也是从祖父组件 (CardsList) 传递的。但是如果不是直接从其直接父组件发送的，则 Link 组件不接受传递的 prop！（是的，它有效，如果我只传递一个级别的字符串 - 但如果它是从 CardsList 传递的（并且刚刚通过），它将不会被接受！）

未处理的运行时错误错误：失败的道具类型：道具href 在<Link> 中期望string 或object，但得到undefined 而是。

是的，我知道，我可以使用状态管理，但我不想为此设置整个状态管理 - 因为它在其他任何地方都不需要它。

非常感谢你们，伙计们！

萨沙

【问题讨论】：

你是如何通过它的？如果可以，请发布CardsList 和Card 代码
嗨，Danila，我像你通常传递道具一样传递它。问题是当我查看传递的道具时，值就在那里。所以它不是未定义的。但是将其传递给 Link 组件失败。我现在通过创建另一个具有相同内容的 String 来修复它 - 然后 Link 组件接受它。请参阅我的答案发布。无论如何谢谢！！！

标签： reactjs hyperlink next.js

【解决方案1】：

在将 prop 传递给链接组件之前，我通过创建另一个 String 来“修复它”（并不自豪！）。

export default function Button({ text, link }) {
  return (
    <Link href={`${link}`} passHref>
      <button className="bg-transparent hover:bg-primary text-link font-semibold hover:text-white py-1 px-3 border border-link hover:border-transparent rounded self-center" >
        {text}
      </button>
    </Link>
  );
}

这很奇怪……也许我以后会找到原因。

问候，

萨沙

【讨论】：