Darragh ORiordan

  • About
  • Articles
  • Projects
  • Hire

Socials & Contact

  • Follow on Twitter
  • Follow on GitHub
  • Follow on LinkedIn
  • mailto:disco@darraghoriordan.com

Explore

  • About
  • Articles
  • Projects
  • Hire
  • Privacy Policy

© 2026 Darragh ORiordan. All rights reserved.

Fix React Router navlink-exact when activeClass is not working

  • #frontend-development
Photo by Adi Goldstein on Unsplash
Published April 9, 2021

If you're adding navlinks with react router because you want to set the active class you might find that it doesn't work. These are the steps I had to take to make this work.

// set the exact property on the route
 <Route path={"/"} exact={true} component={SharingLinks} />

// but you also need to add exact={true} to your NavLink from react-router!
<NavLink
      to={"/"}
      exact={true}
      activeClassName="active-menu-item"
    >
      Sharing Link
</NavLink>

Hey! Are you a developer?

🚀 Set Up Your Dev Environment in Minutes, Not Hours!

Tired of spending hours setting up a new development machine? I used to be, too—until I automated the entire process!

Now, I just run a single script, grab a coffee, and let my setup take care of itself.

Save 30+ hours configuring a new Mac or Windows (WSL) development environment.
Ensure consistency across all your machines.
Eliminate tedious setup and get coding faster!
Get Instant Access →