时间戳

首页 > 解决方案 > React/NextJS 路由道具到孙子的 Link 组件不起作用

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

问题描述

我有点卡住了......并且无法弄清楚这是否是 NextJS 的问题。

我有三个组件：

按钮组件包含一个 nextjs/link 组件。

我需要通过 Card 将文章的链接从 CardsList 传递到 Button（并在此处传递到我<Link>的 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 需要 astring或objectin <Link>，但得到了undefined 。

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

非常感谢你们，伙计们！

萨沙

标签： reactjshyperlinknext.js

解决方案

我已经通过在将道具传递给链接组件之前创建另一个字符串来“修复它”（并不自豪！）。

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>
  );
}

这很奇怪......也许我会在未来找到原因。

问候，

萨沙

推荐阅读