0
217
VistasNext.js Error de enlace al intentar poner FontAwesome en el cuerpo
Uso la biblioteca react-fontawesome en mi proyecto Next.js Cuando trato de poner cualquier ícono dentro del componente Link , hay un error y no lo entiendo en absoluto. ¿Alguien puede explicarme por qué no puedo hacer eso? Además de ese error, la aplicación funciona bien: redirige a la página correcta.
Error (se muestra solo en la consola del navegador; no hay nada al respecto en la terminal):
[
]
Código:
import Link from 'next/link' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faHeart } from '@fortawesome/free-regular-svg-icons' const Component = () => { return ( // ... <Link href='/followed'> <FontAwesomeIcon icon={faHeart} /> </Link> // ... ) }2 Respuestas
Responde la pregunta0
Según la documentación oficial , debe forwardRef al niño si es un componente funcional ( FontAwesomeIcon aquí). Es decir, los componentes funcionales por defecto no aceptan ref prop pasados por el componente Link . Esto no es necesario si el componente Link envuelve elementos nativos (p. ej., div , a ), pero dado que está utilizando un componente funcional (ya sea de una biblioteca de terceros o autoescrito), es necesario forwardRef el componente como el error estados
import Link from 'next/link' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faHeart } from '@fortawesome/free-regular-svg-icons' import React from 'react' const Component = () => { const MyLinkComponent = React.forwardRef(({ onClick, href }, ref) => { return ( <FontAwesomeIcon icon={faHeart} /> ) }) return ( // ... <Link href='/followed' passHref> <MyLinkComponent/> </Link> // ... ) } También tenga en cuenta que he usado passHref prop en el componente Link que obliga a Link a enviar la propiedad href a su hijo. El valor predeterminado es false .
0
Los atributos de paso del componente de Link que FontAwesomeIcon no acepta, debe envolver el FontAwesomeIcon en el elemento html nativo en este caso como span
import Link from 'next/link' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faHeart } from '@fortawesome/free-regular-svg-icons' const Component = () => { return ( // ... <Link href='/followed'> <span><FontAwesomeIcon icon={faHeart} /></span> </Link> // ... ) }