带有 React 的外部链接

Question

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

\n

Carditem.js

\n

import React from 'react';\nimport { Link } from 'react-router-dom';\nfunction CardItem(props) {\n  return (\n    <>\n      <li className='cards__item'>\n        <Link className='cards__item__link' >\n          <figure className='cards__item__pic-wrap' data-category={props.label}>\n         \n            <img\n              className='cards__item__img'\n              alt='Travel '\n              src={props.src}\n            />\n           \n          </figure>\n          <div className='cards__item__info'>\n            <h5 className='cards__item__text'>{props.text}</h5>\n            <Link \n            class='social-icon-card-github'\n            to={{ pathname: "https://github.com" }}\n            <i class='fab fa-github' /> \n            </Link>\n          \n          </div>\n          \n        </Link>\n      </li>\n    </>\n  );\n}\nexport default CardItem;\n

\n

页脚.js

\n

import React from 'react';\nimport './Footer.css';\nimport { Link } from 'react-router-dom';\n\nfunction Footer() {\n  return (\n    <div className='footer-container'>\n      \n      <section class='social-media'>\n        <div class='social-media-wrap'>\n          \n          <small class='website-rights'>\xc2\xa9 2020</small>\n          <div class='social-icons'>\n\n            <Link\n              class='social-icon-link github'\n              to={{ pathname: "https://github.com" }}\n              target='_blank'\n              aria-label='Github'\n            >\n              <i class='fab fa-github' />\n            </Link>\n            <Link\n              class='social-icon-link codepen'\n              to={{ pathname: "https://codepen.io" }}\n              target='_blank'\n              aria-label='Codepen'\n            >\n              <i class='fab fa-codepen' />\n            </Link>\n            <Link\n              class='social-icon-link Linkedin'\n              to={{ pathname: "https://www.linkedin.com" }}\n              target='_blank'\n              aria-label='LinkedIn'\n            >\n              <i class='fab fa-linkedin' />\n            </Link>\n          </div>\n        </div>\n      </section>\n    </div>\n  );\n}\n\nexport default Footer;\n\n

\n

Answer 1

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/

Answer 2

链接元素未关闭

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