title: I was unable to style the active route in React using react-router
body: <p>I intend to style the active route in React using react-router. I am using NavLink to do so. Please see the below code:</p>
  
  <p>COMPONENT.JS</p>
  
  <pre><code>import React from 'react';
  import classes from './navBar.module.css';
  import {NavLink} from 'react-router-dom'
  
  const NavBar = (props) =&gt; {
      return (
          &lt;div className={classes.navBarStyle}&gt;
              &lt;p className={classes.navBarTitle}&gt;EMPOYEE DATABASE&lt;/p&gt;
              &lt;nav className={classes.nav}&gt;
                 &lt;ul className = {classes.navUl}&gt;
                     &lt;li&gt;&lt;NavLink to="/" exact&gt;HOME&lt;/NavLink&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;NavLink to="/addEmployee"&gt;ADD&lt;/NavLink&gt;&lt;/li&gt;
                 &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
      )
  }
  
  export default NavBar;
  </code></pre>
  
  <p>COMPONENT.module.css</p>
  
  <pre><code>.nav {
      height: 100%;   
  }
  
  .navUl {
      list-style-type: none;
      margin: 0;
      padding: 0;
      height: 100%;
      display: flex;
  }
  
  .navUl li {
      height: 100%;
  }
  
  .navUl li a{
      text-decoration: none;
      color: inherit;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
  }
  
  
  .navUl li a:hover{
      background-color: rgb(235, 91, 25);
  }
  
  /* STYLING THE ACTIVE ROUTE HERE */
  .navUl li a.active {
      background-color: rgb(119, 47, 14);
      border-bottom: 2px solid white;
  }
  </code></pre>
  
  <p>I can see the <code>class = "active"</code> getting embedded inside the anchor tag when a particular route is selected. </p>
  
  <p><a href="https://i.stack.imgur.com/NaaTl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NaaTl.png" alt="enter image description here"></a></p>
  
  <p>Hence I intend styled with <code>a.active</code>, but it wasn't getting styled as specified in css file. I don't see any specifity issues in CSS and even the styles doesn't get appeared in the chrome developer tools. Irony is <code>a:hover</code> is working but <code>a.active</code> isn't. Where am I going wrong ?</p>