I've made the Next.js Link as a custom React function with typescript since the "href" property is required for "Link" to be able to call it anywhere I want . so I couldn't used it as a button which working as a submit button in forms
import NextLink, { LinkProps } from "next/link";
import { HTMLProps, FC } from "react";
export const LinkButton: FC<LinkProps & HTMLProps<HTMLAnchorElement>> = ({
as,
children,
href,
replace,
scroll,
shallow,
passHref,
className,
title,
onClick,
...rest
}) => (
<NextLink
as={as}
href={href}
passHref={passHref}
replace={replace}
scroll={scroll}
shallow={shallow}
>
<a className={className} {...rest}>
{children || title}
</a>
</NextLink>
);
and when I used it in somewhere it gave me this error
<LinkButton onClick={() => alert("hello")} title="Find Events" />
Property 'href' is missing in type '{ onClick: () => void; title: string; }' but required in
type 'LinkProps'.
how could I make href optional then if it doesn't called I can conditionally add a "" tag except of "" tag
You can omit href property and define as optional:
Omit<LinkProps & HTMLProps<HTMLAnchorElement>, "href"> & { href?: string }
and then inside component props destructuring you need to specify default value
...
href = "",
...
In order that href is never empty you can get its route and return it when it is not defined
const router = useRouter()
<NextLink
as={as}
href={href ? href : router.asPath} // <---
passHref={passHref}
replace={replace}
scroll={scroll}
shallow={shallow}
>