javascript - 带有路由错误的 React-semantic-ui

Question

我有一个从 react 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 保留为“a”，它就可以工作。 我有什么办法可以解决这个问题吗？ Picture 1

Answer 1

您不应该那样使用 Link 和 Menu.Item。

您可以做一些类似于您已经使用 as 属性所做的事情。你可以说

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

这意味着您需要从 react-router-dom 导入 {Link}，我想您已经这样做了