尝试将 FontAwesome 放入正文时出现 Next.js 链接错误

Question

我在Next.js 项目中使用react-fontawesome 库。当我尝试将任何图标放入 Link 组件中时，会出现错误，我根本不明白。有人可以解释我为什么不能这样做吗？除了该错误之外，应用程序运行良好 - 它重定向到正确的页面。

错误（在浏览器控制台中显示仅 - 终端中没有任何内容）：
[]

代码：

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>
        // ...
    )
}

Answer 1

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>
            // ...
        )
    }

Answer 2

根据official documentation，如果它是一个功能组件，你应该forwardRef给孩子（FontAwesomeIcon这里）。意思是，功能组件默认不接受 Link 组件传递的 ref 属性。如果Link 组件包装了原生元素（例如div,a），则不需要这样做，但由于您使用的是功能组件（来自第三方库或自写），因此需要forwardRef 错误状态的组件。

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>
        // ...
    )
}

另外请注意，我在Link 组件中使用了passHref 属性，它强制Link 将href 属性发送给它的孩子。默认值为false。