如何使用 jsx 在导航中添加外部网站链接到 gatsbyjs/react 站点答案

【问题标题】：How to add external website links in navigation to gatsbyjs/react site using jsx如何使用 jsx 在导航中添加外部网站链接到 gatsbyjs/react 站点
【发布时间】：2020-07-14 15:58:35
【问题描述】：

我正在学习 GatsbyJS/React，并且对整个编码非常陌生。我正在使用一个入门 gatsbyjs/React 模板来帮助我学习。

我只是想在页面上添加一个额外的导航链接，该链接链接到外部网站，而不是内部页面。现在写网站，导航栏是无状态的功能组件？（我认为）我可以添加指向内部页面的链接没问题，但是因为它将网站 URL 放在链接之前，所以我最终将网站 URL 放在我添加的每个导航链接的前面。导航文件是一个 jsx 文件。任何帮助将不胜感激，所以我可以学习。

我尝试实施 GATSBYLINK，但无法正确实施。

这是来自 jsx 文件的导航代码的一部分：

const ListLink = (props) => (
  <li className="c-main-nav__elem" >
    <Link 
      to={props.to} 
      className="c-main-nav__link" 
      activeClassName="c-main-nav__link--is-active" 
      exact={true}
      onClick={props.closeMenu}
    >
      {props.children}
    </Link>
  </li>
);  

class MainNav extends React.Component {
  constructor(props) {
    super(props);
    this.toggleMenu = this.toggleMenu.bind(this);
    this.closeMenu = this.closeMenu.bind(this);
    this.state = {
      links: [
        { to: '/', text: 'Home', icon: FaMapMarker },
        { to: '/toolbox/', text: 'Toolbox', icon: FaWrench },
        { to: '/playground/', text: 'Playground', icon: FaPaperPlaneO },
        { to: '/contact/', text: 'Contact', icon: FaEnvelopeO }
      ],
      mainNavModifierClassName: '',
      mobileDetailsNav: null
    }
  }

【问题讨论】：

标签： reactjs gatsby

【解决方案1】：

您可以使用html a 标签重定向到外部网址

<a href="htpp://myexternalurl.com">URLNAME</a>

或者你可以使用 window.location ="mywebsite.com"

请找到更改MainNav.js文件的render方法如下指定以实现如图所示

  render() {
return (
  <div>
    <ul className={ `c-main-nav ${this.state.mainNavModifierClassName}` }>
      { 
        this.state.links.map((link, i) => (
          <ListLink to={link.to} key={i} testLink={this.testLink}>
            <link.icon />
            <span className="c-main-nav__text">{link.text}</span>
          </ListLink>  
        )) 
      }
      <a href="http://www.gooogle.com"><FaMapMarker /><span>asdasdads</span></a>
      <li 
        className="c-main-nav__elem c-main-nav__elem--close-link" 
        onClick={this.toggleMenu}
      >
        <a href="#" className="c-main-nav__link">
          { (this.state.mainNavModifierClassName) ? <FaChevronUp /> : <FaChevronDown />  }
          <span className="c-main-nav__text">Close</span>
        </a>
      </li>    
    </ul> 
    { this.state.mobileDetailsNav }
  </div>
)
}
};

我使用 google.com 作为我的外部 url 和 asdasdasd 作为我的链接名称，请根据您的要求更改它

谢谢你，祝你好运

【讨论】：

我尝试添加一个标签，但它没有出现。也许我只是不知道在哪里添加它？
你能用你的标签实现更新代码吗？你是如何渲染链接的，你希望链接如何显示
您不能使用 gatsbylink 重定向到外部 url，并且使用标签时必须根据您要重定向到的 url 指定 http 或 https
好的，所以如果我将 gatsbylink 用于内部网站，我是否可以在导航中包含一个链接标签，或者如果我保留，我可以选择完全不包含外部链接盖茨比链接？
@MidlifeCoder 我已经浏览了你的代码，我尝试在主导航中添加一个锚标签并在我的答案中上传了图片（忽略 stying）如果这是我的要求，我会用你需要的代码

【解决方案2】：

在href标签的域名前加https/http即可。

<a href={\`https://${hostname}\`\} target="_blank" rel="norefferer" >{Link Name}</a>

链接不适用于 gatsby 中的外部链接

【讨论】：