Using React and sass, I attempted to utilize the activeClassName property on a NavLink component but found that my active class was not working as expected due to its order in relation to the default class. How can I resolve this issue?
Here is the code:
HTML
<div className="nav-dropdown">
<div className="dropdown-links-list">
<div>
<NavLink to="/" exact activeClassName="dropdown-link-active">
<span>Home</span>
</NavLink>
</div>
<NavLink to="/order" exact activeClassName="dropdown-link-active">
<span>Order</span>
</NavLink>
<NavLink to="/about" exact activeClassName="dropdown-link-active">
<span>About</span>
</NavLink>
<NavLink to="/FAQ" exact activeClassName="dropdown-link-active">
<span>FAQ</span>
</NavLink>
</div>
</div>
CSS
.nav-dropdown {
width: 100%;
background: blue;
height: 100%;
.dropdown-links-list a {
display: grid;
margin-top: -1px;
grid-template-columns: 1fr;
padding: 20px;
background: #fff;
height: 50px;
text-decoration: none;
border: none;
@include grid-center;
span {
color: #000;
font-size: 17px;
text-align: center;
}
}
}
.dropdown-link-active {
background-color: #fff;
}
Any assistance with this matter would be greatly appreciated.