CODEWITHSUNDEEP
reactjsreact-routersemantic-uisemantic-ui-react
bluu
bluu

Reputation: 11

Menu.Item active state not working with NavLink (Semantic-UI-React)

I am using { BrowserRouter } with the following code for my navigation bar.

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

As I'm navigating between the links, the active state doesn't change. Only when I refresh the browser, does the active state changes to the link the browser url is currently on.

Any help would be appreciated!

Upvotes: 0

Views: 2991

Answers (1)

Venkat.R
Venkat.R

Reputation: 7736

Menu.item will not change the automatically until you set props active=true and true value should be depend on current router 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>

Look at the below example from semantic-ui - 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>
    )
  }
}

Upvotes: 2

Related Questions