title: Styling the active link using the NavLink component from React Router is not working as expected
body: <p>I have styled the active link in my React application using the <strong>NavLink</strong> component.</p>
  <p>The problem I am facing is as follows:</p>
  <p><a href="https://i.stack.imgur.com/R4l2y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R4l2y.png" alt="enter image description here" /></a></p>
  <p>When I click on the <strong>Contact</strong> Link, the active link styling is also getting applied to the <strong>Home</strong> link. I want only the <strong>Contact</strong> link to get the border-bottom styling.</p>
  <p>What am I doing wrong?</p>
  <p>The code snippets are as follows:</p>
  <p><strong>src/components/Header.js</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import { NavLink } from &quot;react-router-dom&quot;;
  
  const Header = () =&gt; {
    return (
      &lt;nav&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;NavLink to=&quot;/&quot; activeClassName=&quot;selected&quot;&gt;
              Home
            &lt;/NavLink&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;NavLink to=&quot;/about&quot; activeClassName=&quot;selected&quot;&gt;
              About
            &lt;/NavLink&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;NavLink to=&quot;/contact&quot; activeClassName=&quot;selected&quot;&gt;
              Contact
            &lt;/NavLink&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    );
  };
  
  export default Header;
  </code></pre>
  <p><strong>src/App.js</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import About from &quot;./components/About&quot;;
  import Contact from &quot;./components/Contact&quot;;
  import Home from &quot;./components/Home&quot;;
  import Header from &quot;./components/Header&quot;;
  import { Switch, Route } from &quot;react-router-dom&quot;;
  
  const App = () =&gt; {
    return (
      &lt;&gt;
        &lt;Header /&gt;
        &lt;main&gt;
          &lt;Switch&gt;
            &lt;Route path=&quot;/about&quot; exact&gt;
              &lt;About /&gt;
            &lt;/Route&gt;
            &lt;Route path=&quot;/contact&quot; exact&gt;
              &lt;Contact /&gt;
            &lt;/Route&gt;
            &lt;Route path=&quot;/&quot; exact&gt;
              &lt;Home /&gt;
            &lt;/Route&gt;
          &lt;/Switch&gt;
        &lt;/main&gt;
      &lt;/&gt;
    );
  };
  
  export default App;
  </code></pre>