Slim wrapper for Ant Design's Button that supports routing through React Router's `to` property, making it a replacement for invalid constructs like `<Link to="/"><Button /></Link>`

AntdLinkButton.tsx

import { Button, type ButtonProps } from 'antd';
import { useCallback, type MouseEventHandler } from 'react';
import { useNavigate, useHref, type To, type NavigateOptions } from 'react-router';

export interface LinkButtonProps extends ButtonProps {
	to?: To;
	options?: NavigateOptions;
}

/** Wraps Ant Design's `Button` to allow and correctly handle the React Router `to` prop */
export function LinkButton({ to, options, ...btnProps }: LinkButtonProps) {
	const navigate = useNavigate();
	const href = useHref(to ?? '');

	const handleClick: MouseEventHandler<HTMLElement> = useCallback(
		(event) => {
			event.preventDefault();
			navigate(href, options);
		},
		[href, navigate, options],
	);

	return to ? <Button href={href} onClick={handleClick} {...btnProps} /> : <Button {...btnProps} />;
}