title: Root Navlink always get active class React Router Dom
body: <p>I am using <code>react-router-dom: 4.2.2</code>. I can add <code>activeClassName</code> to the current URL. But surprisingly the class is always added to root URL. </p>
  
  <p>While visiting a page, for example the error page like the screenshot below, the home navlink also getting the activeClass. </p>
  
  <p><a href="https://i.stack.imgur.com/nVelF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/nVelF.png" alt="enter image description here"></a></p>
  
  <p><strong>Update:</strong> In the above screenshot I have showed that I visited <code>http://localhost:3000/#/error</code>. So, the <code>active-link</code> should be added to the <code>Love Error?</code> NavLink only. But as you can see it is also added to <code>Home</code> NavLink too.</p>
  
  <p>Here is my navbar code:</p>
  
  <pre><code>import React from 'react';
  import { NavLink } from 'react-router-dom';
  
  export const NavigationBar = () =&gt; (
    &lt;ul className="horizontal-menu"&gt;
      &lt;li&gt; &lt;NavLink to = '/' activeClassName="active-link"&gt;Home&lt;/NavLink&gt; &lt;/li&gt;
      &lt;li&gt; &lt;NavLink to = '/about' activeClassName="active-link"&gt;About Us&lt;/NavLink&gt; &lt;/li&gt;
      &lt;li&gt; &lt;NavLink to = '/error' activeClassName="active-link"&gt;Love Error?&lt;/NavLink&gt; &lt;/li&gt;
    &lt;/ul&gt;
  )
  </code></pre>
  
  <p>For routing I have used the following Switch:</p>
  
  <pre><code>&lt;Switch&gt;
    &lt;Route exact path = '/' component = {Home} /&gt;
    &lt;Route exact path = '/about' component = {AboutUs} /&gt;
    &lt;Route exact path = '/error' component = {Error404} /&gt;
    &lt;Route path = "/news/:id" component = {NewsDetail} /&gt;
    &lt;Route path="*" component={Error404} /&gt;
  &lt;/Switch&gt;
  </code></pre>
  
  <p>How can I get the expected behavior? </p>