使用Nextjs将道具传递到URL按钮中

Question

这是一个NFT造币机dAPP。我在用nextjs构建的web应用程序中有4种不同的NFT薄荷页面，在每一个都被创建之后，我有一个按钮出现，上面写着“OpenSea上的视图”。

当您单击此按钮时，我希望它能够打开一个新的选项卡，并将您发送到个人列表中的链接，如下所示：

"testnets.opensea.io/assets/mumbai/0xb636c1a63c3b092a7c74304b1947b0162d08a1e4/0".

0xb63..。是合同地址，/0是tokenID。我把tokenId保存在一个数据文件中，把这个支柱传递到我的应用程序的其他领域。但我想不出怎么把它放到URL里。

到目前为止，这就是我所拥有的：

  const url =
    "testnets.opensea.io/assets/mumbai/0xb636c1a63c3b092a7c74304b1947b0162d08a1e4/{props.id}";
  window.open(url, "_blank");
};

但不起作用。对此的任何帮助都是非常感谢的。下面是我的repo：https://github.com/redbrickmedia/rdbrck-nft/blob/0872e3bbd69ae12ff2b2d5532d5e0da0c78663fa/components/Buttons.js#L52中这一行的链接

Answer 1

刚刚尝试了你的代码，工作正常，但我的浏览器自动阻止编程弹出窗口。我建议用<a href="url" target="_blank">替换按钮，使其看起来像您的FilledButton。

也许是因为你的道具没有被插进去，尝试以下几点：

function YourComponent(props) {
  const targetUrl = `https://testnets.opensea.io/assets/mumbai/0xb636c1a63c3b092a7c74304b1947b0162d08a1e4/${props.id}`

   return (
      <a href={targetUrl}> Click here</a>
   )
}