next/link y React refs

🔨 next/link y React refs

Apuntes

• Cuando utilizamos el componente link sobre componentes no nativos como ser las etiquetas: a, button, img Siempre debemos pasar la propiedad passHref

function NavLink({ children, ...linkProps }: PropsWithChildren<LinkProps>) {
  return (
    <Link {...linkProps} passHref>
      <Button color="inherit" variant="text" component="a">
        {children}
      </Button>
    </Link>
  );
}

• En este caso Button proviene de Material UI, la cual el mismo está implementando la referencia que recibe de link y la implementa en el elemento nativo
• En el caso de tener un componente personalizado que ira dentro de una etiqueta Link, debes implementar la funcionalidad React.forwardRef() de la siguiente manera

const MyButton = React.forwardRef(({ href, onClick }, ref) => {
  return (
    <a href={href} onClick={onClick} ref={ref}>
      Click Me
    </a>
  );
});

• Esto porque Next.js necesita tener acceso al DOM para su correcto funcionamiento en next/link
  • Para brindar el acceso al DOM utilizamos las referencias de React.js
  • Por este motivo las referencias en componentes personalizados se deben enviar hacia abajo hasta llegar al elemento nativo
• Al utilizar librerías como Material UI o Styled Components las mismas lo realizan por debajo, pero en casos personalizados debes realizar dicha implementación

📌 **RESUMEN:** Implementar passHref en Next.js es importante para el correcto funcionamiento en el caso de tener un componente personalizado, pasando la referencia hasta llegar al elemento nativo