React-semantic-ui с ошибками маршрута

Question

У меня есть базовое меню, импортированное из реакции semantic-ui

<Menu secondary vertical>
        <Menu.Item
          name='account'
          active={activeItem === 'account'}
          onClick={this.handleItemClick}
        />

У меня, очевидно, больше элементов, и я изменил их так, что каждый элемент в меню ссылается на отдельную страницу:

<Menu secondary vertical>
         <Link to="/account">
         <Menu.Item
          name='account'
          active={activeItem === 'account'}
          onClick={this.handleItemClick}
        />
        </Link>
        
 

Код, очевидно, работает, как и ожидалось, однако я получаю сообщение об ошибке

<a> cannot appear as a descendant of <a>

Итак, я изменил код на <Menu.item as='div', и он все еще работает, однако теряет некоторые функциональные возможности. В основном, прежде чем я смог навести курсор на пункт меню, и он покажет результат на картинке. Чтобы попасть на «аккаунт» того же результата, мне нужно дважды кликнуть. Если я оставляю Menu.item как «а», это работает. В любом случае, я могу это исправить? Изображение 1

Answer 1

Обходной путь (если вам по какой-то причине не нужен тег привязки) - обработать его в методе handleItemclick:

handleItemClick = (e) => {
  //..code
  this.props.history.push('/myroute');
}

Answer 2

Вы не должны использовать Link и Menu.Item как это.

Вы можете сделать что-то похожее на то, что вы уже сделали в качестве свойства. Вы могли бы сказать

<Menu.Item 
   as={Link}
   to={"/account"}
   name='account'
   active={activeItem === 'account'}
   onClick={this.handleItemClick}
>
    Account
</Menu.Item>

Это означает, что вам нужно импортировать {Link} из Reaction-router-dom, что, я полагаю, вы уже сделали