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

Question

这是针对NFT薄荷Dapp。我的Web应用程序中有4个不同的NFTS铸造页面，并在Nextjs构建中，每个nfts应用程序都被铸造出来，我的按钮出现了一个按钮，上面显示“ Opensea上的视图”。

当您单击此按钮时，我希望它可以打开一个新标签，并将您发送到单个列表中的链接，看起来像：

“ testnets.opensea.io/assets/mumbai/0xB636C1A63C3B092A7C74304B1947B0162D08A1E4/0”。

0xb63 ...是合同地址， / /0是代币。我将代币保存在数据文件中，将其传递到我的应用程序的其他领域。但是我不知道如何将其纳入URL。

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

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

但是它不起作用。对此的任何帮助都是感谢。这是我的回购中指向该行的链接：

Answer 1

刚刚尝试了您的代码并正常工作，但我的浏览器会自动阻止编程弹出窗口。我建议用＆lt; a href =“ url” target =“ _ blank”＆gt; 替换按钮，使其看起来像您的填充顿。

也许是因为您的道具没有插值，请尝试以下操作：

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

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