Hice Next.js Link como una función React personalizada con mecanografiado, ya que se requiere la propiedad "href" para que "Link" pueda llamarlo donde quiera. así que no pude usarlo como un botón que funciona como un botón de envío en formularios
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> );y cuando lo usé en algún lugar me dio este error
<LinkButton onClick={() => alert("hello")} title="Find Events" /> Property 'href' is missing in type '{ onClick: () => void; title: string; }' but required in type 'LinkProps'.¿Cómo podría hacer que href sea opcional? Entonces, si no se llama, puedo agregar condicionalmente una etiqueta "" excepto la etiqueta ""
Puede omitir la propiedad href y definirla como opcional:
Omit<LinkProps & HTMLProps<HTMLAnchorElement>, "href"> & { href?: string }y luego dentro de la desestructuración de los accesorios del componente, debe especificar el valor predeterminado
... href = "", ...Para que href nunca esté vacío, puede obtener su ruta y devolverla cuando no esté definida
const router = useRouter() <NextLink as={as} href={href ? href : router.asPath} // <--- passHref={passHref} replace={replace} scroll={scroll} shallow={shallow} >