反应/NextJS路由托给一个孙子的链接分不工作

Question 1

我卡住了...并可以弄清楚这是否是一个问题NextJS.

我有三个部分组成：

CardsList(列出了所有卡-有很多 <Card> 儿童)
卡(代表卡-有 <Button> 儿童)
按钮(显示一个按钮，在卡的使用 <Link> 分量)

按钮成分含有一个nextjs/链组成部分。

我需要传递的文章链接，从CardsList，通过卡，到按钮(和在这里成我的 <Link>'s href)...

这个完美的作品，如果我通过链接(例如/（)直接从卡到按钮...它还表示的串当我途径它从CardsList，通过卡到按钮就打印在屏幕上-是的，我可以看到它的价值...但是它不工作的时候，我这样做：

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). 但件的链接不接受通过托，如果它不是直接送从其直接的父母组件! (是的，它的工作原理，如果我通过串唯一一个水平，但如果它是通过从CardsList(和刚通过)它将不会接受！)

未经处理的运行错误的错误：失败的道具类型：托 href 希望 string 或 object 在 <Link>但有了 undefined 代替。

是的，我知道，我可以使用国家管理，但我不想设立全国管理这个-因为它不需要任何其他地方。

非常感谢你的前，伙计们！

Sascha

Question 2

我"固定"(不感到骄傲！) 通过创建的另一串之前通过的道具的链接组成部分。

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

这很奇怪...也许我会找到理由，为什么在未来。

感谢,

Sascha

Sascha · Answer 1 · 2021-11-15T07:50:43

我"固定"(不感到骄傲！) 通过创建的另一串之前通过的道具的链接组成部分。

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

这很奇怪...也许我会找到理由，为什么在未来。

感谢,

Sascha

反应/NextJS路由托给一个孙子的链接分不工作

的问题

最好的答案

其他语言

此页面有其他语言版本

受欢迎的此类别

流行的问题，在这个类别