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

Posted 2023-02-21

【中文标题】尝试将 FontAwesome 放入正文时出现 Next.js 链接错误

【英文标题】：Next.js Link error when try to put FontAwesome in the body

【发布时间】：2021-12-13 20:28:06

【问题描述】：

我在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>
        // ...
    )

【参考方案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>
            // ...
        )
    

【参考方案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。

【讨论】：

但是你没有使用任何ref到FontAwesomeIcon！

是的，FontAwesomeIcon，这是一个主要不充当a 标签或任何本机元素的组件，它们也不接受任何ref 属性。因此，我们使用forwardRef 只是为了抑制本身所述的错误。