Menu.Item 活动状态不适用于 NavLink (Semantic-UI-React)

Question

我正在为导航栏使用{ BrowserRouter } 和以下代码。

<Menu stackable>
  <Menu.Item as={NavLink} exact to='/' content='Home' />
  <Menu.Item as={NavLink} exact to='/abc' content='ABC' />
  <Menu.Item as={NavLink} exact to='/def' content='DEF' />
</Menu>

当我在链接之间导航时，活动状态不会改变。只有当我刷新浏览器时，活动状态才会更改为浏览器 url 当前所在的链接。

任何帮助将不胜感激！

Answer 1

Menu.item 不会自动改变，直到你设置了 props active=true 并且真正的值应该取决于当前的路由器 url。

<Menu stackable>
  <Menu.Item active={this.isActive('/')} as={NavLink} exact to='/' content='Home' />
  <Menu.Item active={this.isActive('/abc')} as={NavLink} exact to='/abc' content='ABC' />
  <Menu.Item active={this.isActive('/def')} as={NavLink} exact to='/def' content='DEF' />
</Menu>

从语义用户界面看下面的例子 - https://react.semantic-ui.com/collections/menu#types-basic

import React, { Component } from 'react'
import { Menu } from 'semantic-ui-react'

export default class MenuExampleBasic extends Component {
  state = {}

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

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

    return (
      <Menu>
        <Menu.Item
          name='editorials'
          active={activeItem === 'editorials'}
          onClick={this.handleItemClick}
        >
          Editorials
        </Menu.Item>

        <Menu.Item name='reviews' active={activeItem === 'reviews'} onClick={this.handleItemClick}>
          Reviews
        </Menu.Item>

        <Menu.Item
          name='upcomingEvents'
          active={activeItem === 'upcomingEvents'}
          onClick={this.handleItemClick}
        >
          Upcoming Events
        </Menu.Item>
      </Menu>
    )
  }
}