Darragh ORiordan

How to fix React Router navlink exact not working

April 09, 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>
Darragh ORiordan

Hi! I'm Darragh ORiordan.

I live and work in Sydney, Australia enjoying the mountains and the ocean.

I build and support happy teams that create high quality software for the web.

Contact me on Twitter!


Get new writings, curated tech articles and coding tips!