Question

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

Answer 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}，我想您已经这样做了

Answer 2

一种解决方法（如果由于某种原因不需要锚标记）是在handleItemclick方法中处理它：

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

带有路由错误的React-Semantic-UI

2 个答案: