Add link to Font Awesome icon in ReactJS

Question

I use Typescript + ReactJS and I try to add a link in font awesome icons. My code is like this:

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;

Any idea on how to add a URL to my icon?

thanks for any help

Answer 1

You do not need Link from react-router-dom at all as mentioned in the other answer. Just a simple HTML <a> will work

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

Answer 2

Link of react-router-dom will work,

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;