Fix React Router navlink-exact when activeClass is not working

Photo by Adi Goldstein on Unsplash

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 →