Sometimes, we want to style active Link in react-router v4 and JavaScript.
In this article, we’ll look at how to style active Link in react-router v4 and JavaScript.
How to style active Link in react-router v4 and JavaScript?
To style active Link in react-router v4 and JavaScript, we use the NavLink
component.
For instance, we write
<div id="tags-container">
{tags.map((t) => (
<NavLink className="tags" activeStyle={{ color: "red" }} to={t.path}>
{t.title}
</NavLink>
))}
</div>
to render NavLink
s.
We set its activeStyle
to the style that’s rendered when the current link is active.