How to fix a css navigation flashing issue : <p>I have a react app using reactstrap(bootstrap4). I created a simple layout using react-router for the navigation. I cannot figure out why the navbar items flash when you click on one. I am using a built-in NavLink from react-router-dom that keeps the selected NavItem highlighted. </p>

<p>Here is link to the website
<a href="https://stardesigns.azurewebsites.net/" rel="noreferrer">Website</a></p>

<p>Header Component</p>

<pre><code>import {
  Collapse,
  Navbar,
  NavbarToggler,
  Nav,
  NavItem,
  NavbarBrand,
  NavLink } from 'reactstrap'
import { NavLink as RRNavLink } from 'react-router-dom'

const Item = ({link, label}) =&gt; (
  &lt;NavItem&gt;
    &lt;NavLink exact activeClassName='active-tab' to={link} tag={RRNavLink}&gt;{label}&lt;/NavLink&gt;
  &lt;/NavItem&gt;
)

const ROUTES = []

export default class extends React.Component {
  render () {
    return (
      &lt;div className='header-bkg'&gt;
        &lt;Navbar color='faded' light expand='md'&gt;
          &lt;NavbarBrand className='text-white'&gt;Star Designs&lt;/NavbarBrand&gt;
          &lt;NavbarToggler onClick={this._onToggle} /&gt;
          &lt;Collapse isOpen={this.state.isOpen} navbar&gt;
            &lt;Nav className='ml-auto' navbar&gt;
              {ROUTES.map((x, i) =&gt; (
                &lt;Item key={i} {...x} /&gt;
              ))}
            &lt;/Nav&gt;
          &lt;/Collapse&gt;
        &lt;/Navbar&gt;
      &lt;/div&gt;
    )
  }
}
</code></pre>

<p>CSS</p>

<pre><code>   .header-bkg {
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -1px 1px rgba(0, 0, 0, 0.6), 0 0 5px rgba(0, 0, 0, 0.6);
    border-top: 0 solid rgba(47, 46, 46, 1);
    border-bottom: 0 solid rgba(47, 46, 46, 1);
    background-color: #d7a29e;
}

.nav-link:hover,
.nav-link:active {
    background-color: #ede9e2;
}

.nav-link {
    text-transform: uppercase;
}

.active-tab {
    background-color: #ede9e2;
}

:focus {
    outline: -webkit-focus-ring-color auto 0;
}

@media (max-width: 575px) {
}

@media (max-width: 767px) {
}

@media (max-width: 991px) {

}

@media (max-width: 1199px) {
}
</code></pre>
