title: Issue with Menu.Item NavLink always active Semantic UI React
body: <p>I am using semantic ui react and I am using NavLink with Menu.Item for routing. </p>
  
  <p>Below is my navbar component: </p>
  
  <pre><code>const Navbar = () =&gt; (
    &lt;div&gt;
      &lt;Container&gt;
        &lt;Menu secondary stackable widths={4}&gt;
          &lt;Menu.Item&gt;
            &lt;img src={Logo} alt="header" /&gt;
          &lt;/Menu.Item&gt;
          &lt;Menu.Item as={NavLink} to="/" name="home"&gt;
            &lt;Icon name="home" size="large" /&gt;
            &lt;p&gt;Home&lt;/p&gt;
          &lt;/Menu.Item&gt;
          &lt;Menu.Item as={NavLink} to="/data" name="data"&gt;
            &lt;Icon name="dashboard" size="large" /&gt;
            &lt;p&gt;Dashboard&lt;/p&gt;
          &lt;/Menu.Item&gt;
          &lt;Menu.Item as={NavLink} to="/user" name="user"&gt;
            &lt;Icon name="user" size="large" /&gt;
            &lt;p&gt;User&lt;/p&gt;
          &lt;/Menu.Item&gt;
        &lt;/Menu&gt;
      &lt;/Container&gt;
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>Now here is where the issue resides. The routing works fine but for some reason the 'Home' Menu Item is <strong>always active</strong>. </p>
  
  <p>However the other two routes work fine (i.e. are only set 'active' when route is correct)</p>
  
  <p><a href="https://i.stack.imgur.com/fcnVK.png" rel="nofollow noreferrer">Here is what it looks like with /dashboard route active</a>  </p>
  
  <p>The code for the routes in my App.jsx: </p>
  
  <pre><code>&lt;Switch&gt;
      &lt;Route exact path="/" component={Home} /&gt;
      &lt;Route path="/data" component={Dashboard} /&gt;
      &lt;Route path="/user" component={User} /&gt;
  &lt;/Switch&gt;
  </code></pre>
  
  <p>The photo above should give you a clear indication of the issue!</p>
  
  <p>Any input would be appreciated!!</p>