ActiveClassName React Router
// Before React Router v6, to set class for active element we used:
<NavLink to="/start" activeClassName="HERE NAME CLASS WHEN COMPONENT IS ACTIVE">start</NavLink>
// Now, instead of activeClassName="HERE..." use:
className={(navLinkObj) => "start-selected_" + navLinkObj.isActive}
// And then in css use:
.start-selected_true {
background-color: red;
border-bottom: 5px solid yellow;
}
// Also, you can do the same for inactive link. In css use:
.start-selected_false {
background-color: blue;
border-bottom: 5px dashed green;
}
// PS: (navLinkObj.isActive) returns true if element is active and false if element is not
// PS: I really advice you to check out documentation of React Router. It helped me :)
// React Router Documentation: https://v5.reactrouter.com/web/api
Disgusted Dunlin