Navbar styling active underline

I have a nav bar that animates an underline when the user hover overs the link. I am trying to add css so the active nav bar has a permanent underline.

My code

<Navbar className="navbar-expand-sm navbar-toggleable-sm" light>
                <Container id="ContainerGrnH">
            <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
                    <Collapse className="d-sm-inline-flex flex-sm-row-reverse" isOpen={!this.state.collapsed} navbar>
            <div class="topnav">
              <ul className="navbar-nav flex-grow">
                <NavItem>
                  <NavLink tag={Link} className="text-white"  to="/home">HOME <div className="underline"></div></NavLink>
                </NavItem>
                <NavItem>
                    <NavLink tag={Link} className="text-white" to="/people-profiles">PEOPLE PROFILES<div className="underline"></div></NavLink>
                </NavItem>
                <NavItem>
                    <NavLink tag={Link} className="text-white" to="/Role-types">ROLE TYPES<div className="underline"></div></NavLink>
                </NavItem>
                <NavItem>
                    <NavLink tag={Link} className="text-white" to="/support">SUPPORT<div className="underline"></div></NavLink>
                </NavItem>
                <NavItem>
                    <NavLink tag={Link} className="text-white" id="contactushead" to="/contact-us">CONTACT US<div className="underline"></div></NavLink>
                </NavItem>
                </ul>
                </div>
            </Collapse>
          </Container>
            </Navbar>

.topnav ul a {
    color: #ffffff;
    text-decoration: none;
    padding: 10px;
    transition: color 0.5s;
}
.topnav ul li .underline {
    height: 3px;
    background-color: transparent;
    width: 0%;
    transition: width 0.2s, background-color 0.5s;
    margin: 0 auto;
}

.topnav ul li.active-link .underline {
    width: 100%;
    background-color: white;
}

.topnav ul li:hover .underline {
    background-color: white;
    width: 100%;
}

.topnav ul li:hover a {
}

.topnav ul li:active a {
    transition: none;
    color: rgba(255,255,255,0.76);
}

.topnav ul li:active .underline {
    transition: none;
    background-color: rgba(255,255,255,0.76);
}

It's most likely a slight error but I've been playing around for a bit now and can't seem to find many solutions.

As you can see by the image the word home should be underlined as home has been selected.

Solution

Are you using react-router-dom's NavLink?

If so, there is actually an activeClassName props which could be use to identify the route is currently being visited.

<NavLink tag={Link} className="text-white" exact activeClassName="underline" to="/people-profiles">PEOPLE PROFILES</NavLink>

and in your css

.underline {
 border-bottom-width: 2px;
}

Don't forget to add exact in the NavLink's props to match properly with the route.