No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

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?

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