React router v4 active anchor link

Question

I got anchor links in my app. How do I make active style work if anchor link is active.

<NavLink
  to="/#somewhere"
  activeClassName="selected"
>AnchorLink</NavLink>

Answer 1

For styling current active link you can give styles to class that is provided in parameter activeClassName, but it does not work with hash URLs, but for active class we can compare location.hash with our hash name.

example:

<li>
          <Link className={location.hash == "#about" ? "active" : ""} to='#about'>
          About
        </Link>
        </li>
        <li>
          <Link className={location.hash == "#user" ? "active" : ""} to='#user'>
          User
        </Link>
        </li>
        <li>
          <Link className={location.hash == "#repo" ? "active" : ""} to='#repo'>
          Repository
        </Link>
</li>

So for this example we have provided styles

.active {
  font-weight: bold;
}

so font will be bold only for link that is currently active.