Darragh ORiordan

  • About
  • Articles
  • Projects
  • Hire

Stay up to date

Subscribe to the newsletter to stay up to date with articles, news and much more!

Read the Privacy Policy.

Socials & Contact

  • Follow on Twitter
  • Follow on GitHub
  • Follow on LinkedIn
  • mailto:darragh.oriordan(AT)gmail.com

Sitemap

AboutArticlesProjectsHire

© 2025 Darragh ORiordan. All rights reserved.

Fix React Router navlink-exact when activeClass is not working

  • #frontend-development
Photo by Adi Goldstein on UnsplashApril 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 →