在 ReactJS 中添加到 Font Awesome 图标的链接答案

【问题标题】：Add link to Font Awesome icon in ReactJS在 ReactJS 中添加到 Font Awesome 图标的链接
【发布时间】：2019-12-03 16:08:03
【问题描述】：

我使用 Typescript + ReactJS，并尝试在字体真棒图标中添加链接。我的代码是这样的：

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faRandom } from '@fortawesome/free-solid-svg-icons'


const MiddleHeading = () => {
     return (
         <div id="middle_heading">  

              <FontAwesomeIcon icon={faRandom} size="2x"/>          

         </div>
     );
 };

 export default MiddleHeading;

知道如何为我的图标添加 URL 吗？

感谢您的帮助

【问题讨论】：

标签： javascript html reactjs typescript font-awesome-5

【解决方案1】：

react-router-dom 中的Link 将起作用，

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faRandom } from '@fortawesome/free-solid-svg-icons'
import { Link } from 'react-router-dom';

const MiddleHeading = () => {
     return (
         <div id="middle_heading">  
            <Link to="/any-url">
              <FontAwesomeIcon icon={faRandom} size="2x"/>          
            </Link> 
         </div>
     );
 };

 export default MiddleHeading;

【讨论】：

完全矫枉过正

【解决方案2】：

正如另一个答案中提到的那样，您根本不需要来自react-router-dom 的Link。只需一个简单的 HTML <a> 即可

<div id="middle_heading">  
  <a href="example.com">
    <FontAwesomeIcon icon={faRandom} size="2x"/>      
  </a>    
</div>

【讨论】：

这应该是公认的答案。

【解决方案3】：

我通过将其包装在 <a> 标记中来使其工作。

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faTwitter } from "@fortawesome/free-brands-svg-icons"

export default function SocialLinks() {
  return (
    <div className="mt-10">
      <a href='https://www.google.com'>
        <FontAwesomeIcon icon={faTwitter} size="2x" />
      </a>
    </div>
  )
}

【讨论】：