Как добавить внешние ссылки сайта при навигации на сайт gatsbyjs / реагировать с помощью jsx

Question

Я изучаю 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
    }
  }

Answer 1

Вы можете использовать тег html a для перенаправления на внешние URL

<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 в качестве имени ссылки. Пожалуйста, измените его согласно вашему требованию

Спасибо и желаю удачи