Hi I am using react router v6 and I use NavLink to navigate from one component to another component. I want to add custom active class in NavLink how can I achieve in react router v6. I use this but its not working.
<NavLink className="px-3 py-2 bg-primary" to={"/"} activeClassName="btn-group-active" >
Home
</NavLink >
How to achieve above with react router v6.
I got my answer from this link.
You can achieve this by doing that:
<NavLink
to={customPath}
className={({ isActive }) => (isActive ? "myCssClass" : "")}
>
<Home />
</NavLink>
If you have further classes you concat them like that:
<NavLink
to={customPath}
className={({ isActive }) => (isActive ? "myActiveClass defaultClass defaultClassTwo" : "defaultClass")}
>
<Home />
</NavLink>