如何让链接出现在我制作的组件上方？

问题描述

如何让链接出现在我制作的组件上方？ 我使用 Next.js 11 版本。

这是错误信息。

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Link`.

这是我的源代码。

const data = [1,2,3,4,5,6,7,8];

const ContentByMenu = () => {
    switch (menu) {
      case "asset": {
        return data.map((data,key) => {
          console.log(data,key);
          return (
            <Link href={`/marketplace/asset/detail?asset=${data}`} key={key}>
              <AssetCard
                like={data}
                asset={data}
                token={data}
                price={data}
                key={key}
                className="pointer"
              />
            </Link>
          );
        });
      }

      case "token": {
        return data.map((data,key) => {
          return (
            <Link href={`/marketplace/token/detail?asset=${data}`} key={key}>
              <TokenCard token={data} contents={data} key={key} />
            </Link>
          );
        });
      }

      case "account": {
        return data.map((data,key) => {
          return (
            <Link href={`/marketplace/asset/detail?asset=${data}`} key={key}>
              <AccountCard account={data} key={key} />
            </Link>
          );
        });
      }
    }
  };

Card 组件只是 ui 数据，const 数据是临时数据。 我认为在链接中嵌入 comp 是错误的。 我该怎么办？

解决方法

首先，您应该导入链接

import Link from 'next/link';

那么你应该使用标签a

    const data = [1,2,3,4,5,6,7,8];

    const ContentByMenu = () => {
        switch (menu) {
          case "asset": {
            return data.map((data,key) => {
              console.log(data,key);
              return (
                <Link href={`/marketplace/asset/detail?asset=${data}`} key={key}>
             <a> 
<AssetCard
                like={data}
                asset={data}
                token={data}
                price={data}
                key={key}
                className="pointer"
              />
</a>
            </Link>
          );
        });
      }

      case "token": {
        return data.map((data,key) => {
          return (
            <Link href={`/marketplace/token/detail?asset=${data}`} key={key}>
              <a>
<TokenCard token={data} contents={data} key={key} />
</a>
            </Link>
          );
        });
      }

      case "account": {
        return data.map((data,key) => {
          return (
            <Link href={`/marketplace/asset/detail?asset=${data}`} key={key}>
              <a>
<AccountCard account={data} key={key} />
</a>
            </Link>
          );
        });
      }
    }
  };