我有一个从react react-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

最佳答案

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

您可以执行与作为属性已经执行的操作类似的操作。你可以说

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


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

10-06 04:24
查看更多