External Link with React

user_7782555 0
Viewed 16763

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;
react-native reactjs javascript
5 Answers

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/

user_49499180

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

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

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

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>

user_135553870

the link element is not closed

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