React Router Tutorial #11 NavLink and Active Class

What is Nav Link

Difference between Nav Link and Link

Apply Active Class

Interview Question

In React Router, a NavLink is a special type of link used for navigation that can automatically apply active styling when the link’s route matches the current URL.


import { NavLink, Outlet } from "react-router";
import './header.css'
export default function NavBar() {
return <div>
<div className="header">
<div>
<NavLink className="link" to={"/"}><h2>Logo</h2></NavLink>
</div>
<div>
<ul>
<li>
<NavLink className={({ isActive }) => isActive ? 'custom-active link' : 'link'} to="/">Home</NavLink>
</li>
<li>
<NavLink className="link" to="/in/user/login">Login</NavLink>
</li>
<li>
<NavLink className="link" to="/in/user/about">About</NavLink>
</li>
<li>
<NavLink className="link" to="/college">College</NavLink>
</li>
<li>
<NavLink className="link" to="/users">Users</NavLink>
</li>
<li>
<NavLink className="link" to="/users/list">List</NavLink>
</li>

</ul>
</div>

</div>
<Outlet />
</div>
}



.header {
display: flex;
justify-content: space-between;
background-color: #e1caca;
padding: 10px;
}
body{
margin: 0;
padding: 0;
}

.header ul {
display: flex;
list-style-type: none;
margin: auto;
justify-content: space-around;
width: 450px;
}
.header ul li{
padding: 10px;
}
.header .link h2{
margin: 0;
}
.header .link{
text-decoration: none;
font-size: 20px;
}

.college .link{
text-decoration: none;
font-size: 20px;
margin: 10px;
}

.active{
font-weight: 800;
}
.custom-active{
font-weight: 900;
color: blue;
}