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

【问题标题】：Issue with Menu.Item NavLink always active Semantic UI ReactMenu.Item NavLink 始终处于活动状态的问题 Semantic UI React
【发布时间】：2018-08-29 22:12:44
【问题描述】：

我正在使用语义 ui react，并且我正在使用带有 Menu.Item 的 NavLink 进行路由。

下面是我的导航栏组件：

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>
);

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

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

Here is what it looks like with /dashboard route active

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

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

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

任何意见将不胜感激！

【问题讨论】：

将 exact 属性添加到您的菜单项
@AngelSalazar 谢谢我的朋友刚刚遇到这种行为！你解决了它！

标签： reactjs react-router semantic-ui semantic-ui-react

【解决方案1】：

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

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

【讨论】：

只有在导航组件在 MapStateToProps 中设置了状态时它才对我有用，这不应该是这样吗？

【解决方案2】：

这是我帮助解决问题的设置。我收到以下错误：

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.
in a (created by Link)
in Link (created by Route)
in Route (created by NavLink)
in NavLink (created by MenuItem)
in MenuItem (at NavBar.js:47)
in a (created by Link)
in Link (created by Route)
in Route (created by NavLink)
in NavLink (at NavBar.js:46)
in div (created by Menu)
in Menu (at NavBar.js:20)
in NavBar (at App.js:26)
in div (at App.js:25)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:24)
in div (at App.js:22)
in App (at index.js:6)

主要的组件设置在我做路由的 App.js 中

 <Router>
      <div>
      <NavBar />
      <Route exact path="/" component={LoginSignUpContainer}></Route>
<Router>

这里有我的 NavBar 组件，其中包含我遇到问题的位置。

class NavBar extends Component{
 constructor(){
    super();

    this.state={
        activeItem: "home"
    }
}
handleItemClick = (e, { name }) => this.setState({ activeItem: name })


render() {
const { activeItem } = this.state

return (
  <Menu>
     <NavLink to="/bills">
    <Menu.Item
      name='bills'
      active={activeItem === 'bills'}
      onClick={this.handleItemClick}>
      <Icon name="payment"/>Bills
    </Menu.Item>

  <Menu>

我删除了 NavLink 标记并在我添加的 Menu.Item 标记中：

 as={NavLink}
 to="bills"

更新后：

<Menu.Item
    as={NavLink}
    to="/bills"
    name='bills'
    active={activeItem === 'bills'}
    onClick={this.handleItemClick}>
  <Icon name="payment"/>Login
</Menu.Item>

【讨论】：