[英]Nesting inside Link from Next.js
我正在尝试将Badge
嵌套在Link
。 我试图将它包装成<a>
标签。 它解决了一些错误,但我仍然收到以下错误:
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;
这是一个可能的解决方案,但我仍然遇到相同的错误。
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>;
更新:
您需要在徽章内使用<Link>
。
<Badge count={cart.length} offset={[9, 0]}>
<Link href="/cart">
<a>Cart</a>
</Link>
</Badge>
参考资料 -徽章 - Ant Design
在<Link>
使用组件时需要使用passHref
<Link href="/cart" passHref={true}>
<Badge as="a" count={cart.length} offset={[9, 0]}>
Cart
</Badge>
</Link>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.