External Link with React

Question

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;

Answer 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/

Answer 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>