时间戳

首页 > 解决方案 > 与 React 的外部链接

javascript - 与 React 的外部链接

问题描述

我对 React 完全陌生，我正面临外部链接的问题。每次单击图标时，我都想使用它重定向到 GitHub，但实际上新窗口没有显示，而是我有这个 URL：http://localhost:3000/https://github.com。我不知道为什么它不起作用，因为我的页脚代码几乎相同，而且运行良好。如果您对此有解决方案，将不胜感激！非常感谢

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;

页脚.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;

标签： javascriptreactjsreact-native

解决方案

react-router 用于内部导航，如果你想在你的网站之外导航，你应该使用 a 元素：

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

这rel="noopener"是一个很好的安全实践：https ://mathiasbynens.github.io/rel-noopener/

推荐阅读