Categories
JavaScript Answers

How to style active Link in react-router v4 and JavaScript?

Spread the love

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 NavLinks.

We set its activeStyle to the style that’s rendered when the current link is active.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *