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 1

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

ūüĒ® 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