Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

next/link y React refs

9/19
Recursos

Aportes 1

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

🔨 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