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!
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>
)
}
}
