CODEWITHSUNDEEP
javascriptreactjsreact-native
Chris Lopez
Chris Lopez

Reputation: 311

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;

Upvotes: 7

Views: 32365

Answers (6)

ZiChengHuang915
ZiChengHuang915

Reputation: 51

Generally, you should use tags such as <a> to redirect to external sites. react-router is used for internal navigation. If you really wish to do it in this way, you can set the path in the to parameter.

<Link to="https://www.linkedin.com/in/zichenghuang915/">

Note that you must prepend the URL with https://, or else react-router will just append your string to the root URL.

Upvotes: 0

Ashiqur Rahman
Ashiqur Rahman

Reputation: 60

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

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

Upvotes: 2

Munna Khandakar
Munna Khandakar

Reputation: 353

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>

Upvotes: 0

mleister
mleister

Reputation: 2585

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>

Upvotes: 3

Axnyff
Axnyff

Reputation: 9974

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/

Upvotes: 10

Christos Christou
Christos Christou

Reputation: 192

the link element is not closed

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

Upvotes: -3

Related Questions