我有一个从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
您不应该使用Link和Menu.Item。
你可以做一些类似你已经做过的事情。你可以说
<Menu.Item
as={Link}
to={"/account"}
name='account'
active={activeItem === 'account'}
onClick={this.handleItemClick}
>
Account
</Menu.Item>
这意味着您需要从react-router-dom导入{Link},我想您已经这样做了
解决方法(如果由于某种原因不需要锚标记)是在方法handleItemclick中处理它:
handleItemClick = (e) => {
//..code
this.props.history.push('/myroute');
}