Menu.Item NavLink 始终处于活动状态的问题 Semantic UI React

Question

我正在使用语义 ui react，我正在使用 NavLink 和 Menu.Item 进行路由。

下面是我的导航栏组件：

const Navbar = () => (
  <div>
    <Container>
      <Menu secondary stackable widths={4}>
        <Menu.Item>
          <img src={Logo} alt="header" />
        </Menu.Item>
        <Menu.Item as={NavLink} to="/" name="home">
          <Icon name="home" size="large" />
          <p>Home</p>
        </Menu.Item>
        <Menu.Item as={NavLink} to="/data" name="data">
          <Icon name="dashboard" size="large" />
          <p>Dashboard</p>
        </Menu.Item>
        <Menu.Item as={NavLink} to="/user" name="user">
          <Icon name="user" size="large" />
          <p>User</p>
        </Menu.Item>
      </Menu>
    </Container>
  </div>
);

现在这里是问题所在。路由工作正常，但由于某种原因，“主页”菜单项始终处于活动状态。

然而，其他两条路线工作正常（即仅在路线正确时才设置为“活动”）

这是 /dashboard 路由处于活动状态时的样子

我的 App.jsx 中的路由代码：

<Switch>
    <Route exact path="/" component={Home} />
    <Route path="/data" component={Dashboard} />
    <Route path="/user" component={User} />
</Switch>

上面的照片应该可以清楚地表明问题所在！

任何输入将不胜感激！

Answer 1

可以从上面的 AngelSalazar 确认，这修复了它。谢谢！

<Menu.Item as={NavLink} exact to="/" name="home">