How can I style active Link in react-router v4?

Question

In react-router v3 we had activeStyle and activeClassName to style active Link

we could do something like this

  <div id="tags-container">     {tags.map(t =>       <Link         className="tags"         activeStyle={{ color: 'red' }}         to={t.path}       >         {t.title}       </Link>     )}   </div> 

I wanna know how can I do same thing in v4?

Answer 1

Use NavLink instead Link. Its not documented, but its work as you expect. https://github.com/ReactTraining/react-router/issues/4318

UPDATE 17.05.2017:

https://reacttraining.com/react-router/web/api/NavLink

Answer 2

You can do it with NavLink in react-router v4

 <div id="tags-container">    {tags.map(t =>      <NavLink        className="tags"        activeStyle={{ color: 'red' }}        to={t.path}      >        {t.title}      </NavLink>    )}  </div>