[BUG] I can't prevent navigate behaviour of link

[Firuzcan Hacıyev]

Describe the bug
I have added onClick prop to link to prevent navigate behaviour. It's not possible. In some cases we need to prevent it's navigate behaviour and add middleware to navigate route. We can use normal html link with useNavigate hook but in this case prefetch functionality of link is not working.

Expected behaviour
When we add onClick or other listeners as a prop, it should possible to prevent it's behaviours.

Code

const Navigate: React.FC<NavigateProps> = ({ children, ...props }) => {
  const navigate = useNavigate();

  const { fadeOut } = useContext(TransitionLayoutContext) || {};

  const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
    e.preventDefault();
    e.stopPropagation();

    fadeOut?.({
      onComplete() {
        navigate(props.to);
      },
    });
  };

  return (
    <Link onClick={handleClick} {...props}>
      {children}
    </Link>
  );
};

• Hydrogen version 1.6.5
• Node version 16.18.0
• Device details Mac OS Ventura, M1 2020