Активное состояние Menu.Item не работает с NavLink (Semantic-UI-React) - PullRequest
Новая
       30

Активное состояние Menu.Item не работает с NavLink (Semantic-UI-React)

0 голосов
/ 26 июня 2018

Я использую { 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-адрес браузера.

Любая помощь приветствуется!

1 Ответ

0 голосов
/ 26 июня 2018

Menu.item не изменит автоматически, пока вы не установите реквизиты 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>

Посмотрите на приведенный ниже пример из semantic-ui - https://react.semantic -ui.com / collection / 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>
    )
  }
}
...