我对 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;
页脚.jsimport 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-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/
关于javascript - 与 React 的外部链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64092771/