With React Semantic UI use NavLink to set active page class?

user_467875 0
Viewed 3552

Im using Semantic UI React and React Router. The NavLink componenet from React Router knows then its the active page link and can set an active class: 

<NavLink to="/" exact activeClassName="active">Home</NavLink>

However this doesn't work with Semantic UI React: 

    <Menu.Item
      header
      as={NavLink}
      to="./"
      children="Diplomat"
      activeClassName="active"
    />

I can see in the browser that the aria-current property is being set to true correctly. So NavLink does 'know' when its active but I cant pass this to Menu.Item.

semantic-ui reactjs
1 Answers

I made a mistake. I just needed an exact attribute and a different path. Now it works. 

<Menu.Item header as={NavLink} exact to="/" children="Diplomat" />
user_4678750
Related