xxxxxxxxxx
import React from 'react';
import { NavLink } from 'react-router-dom';
const Header = () => {
return (
<div>
<nav className="navbar navbar-expand-lg navbar-light bg-primary">
<NavLink exact to="/" className="nav-link" activeClassName="active">Home</NavLink>
<NavLink to="/register" className="nav-link" activeClassName="active">Register</NavLink>
<NavLink to="/login" className="nav-link" activeClassName="active">Login</NavLink>
<NavLink to="/profile" className="nav-link" activeClassName="active">Profile</NavLink>
</nav>
</div>
);
}
export default Header;
In App.css file
add below code:
.navbar-nav .nav-link.active {
color: orange !important;
}
xxxxxxxxxx
// 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