使用React Semantic UI使用NavLink设置活动页面类？

Question

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.

Answer 1

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