The legacy behavior requires onMouseEnter be set on the child of next/link
I have encountered an issue in my current project, I am using blitzjs, which is a full stack approach on top of nextjs, and Ant.design as UI framework.
I have a WARNING in console:
onMouseEnter” was passed to with href of [object Object] but “legacyBehavior” was set. The legacy behavior requires onMouseEnter be set on the child of next/link
1. Code have issue
<Tooltip title="for dummies">
<Link href={Routes.ShowProductPage({ slug: "for-dummies" })} passHref>
<Button icon={<EyeOutlined />} type="link"></Button>
</Link>
</Tooltip>
2. Solution
- Create a new component for next/link and antd button
import React from "react";
import Link, { LinkProps } from "next/link";
import { Button, type ButtonProps } from "antd";
type AntdButtonNextLinkProps = LinkProps & Omit<ButtonProps, "href">;
const AntdButtonNextLink = React.forwardRef(
({ href, children, ...props }: AntdButtonNextLinkProps, ref: any) => {
return (
<Link href={href} passHref>
<Button ref={ref} {...props} type="link">
{children}
</Button>
</Link>
);
}
);
- Fix the issue by using the new component
<Tooltip title="for dummies">
<AntdButtonNextLink
href={Routes.ShowProductPage({ slug: "for-dummies" })}
icon={<EyeOutlined />}
/>
</Tooltip>