将 link 添加到 ReactJS 中的 Font Awesome 图标

Question

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

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 吗？

感谢您的帮助

Answer 1

Link 共 react-router-dom 行，

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;

Answer 2

您根本不需要 react-router-dom 中的 Link，如其他答案中所述。只需一个简单的 HTML <a> 即可

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

将 link 添加到 ReactJS 中的 Font Awesome 图标

Add link to Font Awesome icon in ReactJS

javascript

html

reactjs

typescript

font-awesome-5