'External Link with React

I'm totally new with React and I'm facing off a problem with an external Link. I would like to use it for a redirection to GitHub every time I click on the icon but actually the new window is not showing up instead I have this URL : http://localhost:3000/https://github.com. I don't why it is not working because with my footer i have almost the same code and it is working well. If you have solutions for that it will be much appreciated ! Thank you very much

Carditem.js

import React from 'react';
import { Link } from 'react-router-dom';
function CardItem(props) {
  return (
    <>
      <li className='cards__item'>
        <Link className='cards__item__link' >
          <figure className='cards__item__pic-wrap' data-category={props.label}>
         
            <img
              className='cards__item__img'
              alt='Travel '
              src={props.src}
            />
           
          </figure>
          <div className='cards__item__info'>
            <h5 className='cards__item__text'>{props.text}</h5>
            <Link 
            class='social-icon-card-github'
            to={{ pathname: "https://github.com" }}
            <i class='fab fa-github' /> 
            </Link>
          
          </div>
          
        </Link>
      </li>
    </>
  );
}
export default CardItem;

Footer.js

import React from 'react';
import './Footer.css';
import { Link } from 'react-router-dom';

function Footer() {
  return (
    <div className='footer-container'>
      
      <section class='social-media'>
        <div class='social-media-wrap'>
          
          <small class='website-rights'>© 2020</small>
          <div class='social-icons'>

            <Link
              class='social-icon-link github'
              to={{ pathname: "https://github.com" }}
              target='_blank'
              aria-label='Github'
            >
              <i class='fab fa-github' />
            </Link>
            <Link
              class='social-icon-link codepen'
              to={{ pathname: "https://codepen.io" }}
              target='_blank'
              aria-label='Codepen'
            >
              <i class='fab fa-codepen' />
            </Link>
            <Link
              class='social-icon-link Linkedin'
              to={{ pathname: "https://www.linkedin.com" }}
              target='_blank'
              aria-label='LinkedIn'
            >
              <i class='fab fa-linkedin' />
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
}

export default Footer;

Solution 1:^[1]

react-router is used for internal navigation, if you want to navigate outside of your website you should use an a element:

        <a
          class='social-icon-link github'
          href="https://github.com"
          target='_blank'
          rel="noopener"
          aria-label='Github'
        >
          <i class='fab fa-github' />
        </a>

The rel="noopener" is a good security practice: https://mathiasbynens.github.io/rel-noopener/

Solution 2:^[2]

You cannot call external links with react-router-dom's Link component. Try the following:

<a href="https://github.com">Link</a>

You can also open links in a new tab:

<a href="https://github.com" target="_blank">Link in new tab</a>

Solution 3:^[3]

If your URL coming from the API's you can use like that

<Link to={{ pathname:`https://${strFacebook}`}} target="_blank"> Facebook </Link>

Solution 4:^[4]

Hope you have understood. The main fact is you need to use tag instead of tag. Side by side you have to endure that the url must start with "https:" else it will always redirect to localhost:........ for example, if you write <a href="github.com">Github</a> it will not work. You have to write <a href="https://github.com">Gitbuh</a>

Solution 5:^[5]

the link element is not closed

<Link 
        class='social-icon-card-github'
        to={{ pathname: "https://github.com" }}>
        <i class='fab fa-github' /> 
        </Link>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Axnyff
Solution 2	mleister
Solution 3	Ashiqur Rahman
Solution 4	Munna Khandakar
Solution 5	Christos Christou

'External Link with React

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]