Как сделать так, чтобы ссылка отображалась над созданным мной компонентом?

Question

Как сделать так, чтобы ссылка отображалась над созданным мной компонентом? Я использую версию 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>
          );
        });
      }
    }
  };

Компонент карты - это просто данные пользовательского интерфейса, а данные const - это временные данные. Я считаю неправильным встраивать комп в ссылки. Что мне делать?

Answer 1

для начала вам следует импортировать ссылку

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