Question

我正在学习GatsbyJS / React，并且对于整体编码来说还是很新的。我正在使用入门gatsbyjs / React模板来协助学习。

我只是想在页面上添加一个附加的导航链接，该链接链接到外部网站而不是内部页面。就像现在写的站点一样，导航栏是无状态功能组件吗？（我认为），我可以添加到内部页面的链接没有问题，但是因为它将网站URL放在链接之前，所以我最终将网站URL放在我添加的每个navlink的前面。导航文件是一个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
    }
  }

Answer 1

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

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

或者您可以使用window.location =“ mywebsite.com”

请按照下面的说明更改render文件的MainNav.js方法，以实现图片中指定的效果

  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作为我的链接名称，请根据您的要求进行更改

谢谢，祝你好运

Answer 2

只需在href标签中的域名之前添加 https / http 。

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

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

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

2 个答案: