how to make a Next.js "Link" 's "href" property optional-CodePudding

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

CodePudding user response：

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 = "",
...