嵌套在 Next.js 的 Link 中

Question

I am trying to nest Badge inside the Link . I tried to wrap it into <a> tag. It solved few errors but I am still getting the following one:

import { useState } from 'react';
import Link from 'next/link';
import { Menu, Badge } from 'antd';
import { ShoppingCartOutlined } from '@ant-design/icons';

const { Item } = Menu;

const Header = () => {
  const [current, setCurrent] = useState('home');

  const cart = [1, 2, 3];

  const handleClick = (e) => {
    // console.log(e.key);
  };

  return (
    <Menu onClick={handleClick} selectedKeys={[current]} mode="horizontal">
      <Item key="cart" icon={<ShoppingCartOutlined />}>
        <Link href="/cart">
          <a>
            <Badge count={cart.length} offset={[9, 0]}>
              Cart
            </Badge>
          </a>
        </Link>
      </Item>
    </Menu>
  );
};

export default Header;

Here is a possible solution but I am still getting the same error.

const MyBadge = React.forwardRef(({ href }, ref) => {
    return (
      <a href={href} ref={ref}>
        <Badge count={cart.length} offset={[9, 0]}>
          Cart
        </Badge>
      </a>
    );
  });

<Item key="cart" icon={<ShoppingCartOutlined />}>
  <Link href="/cart" passHref>
    <MyBadge />
  </Link>
</Item>;

Answer 1

Updated:

You'll need to use <Link> inside the badge.

<Badge count={cart.length} offset={[9, 0]}>
  <Link href="/cart">
    <a>Cart</a>
  </Link>
</Badge>

Reference - Badge - Ant Design

---

You need to use passHref while using components within <Link>

<Link href="/cart" passHref={true}>
  <Badge as="a" count={cart.length} offset={[9, 0]}>
    Cart
  </Badge>
</Link>