React router V6 is always active

Question

I have defined a few routes:

const MainRoutes = {
  path: "/",
  element: <MainLayout />,
  children: [
    {
      index: true,
      element: <DashboardDefault />,
    },
    {
      path: "werknemers",
      element: <Werknemers />
    },
    {
      path: "verzuimdossiers",
      element: <Verzuimdossiers />
    }
  ],
};

My <MainLayout /> contains the Sidebar, Header and Outlet. In my Sidebar, I have a few <NavLinks/> like so:

<NavLink exact to="/" className={({ isActive })=> (isActive ? `active ${LINK_CLASSES}` : `inactive ${LINK_CLASSES}`)}>
  <span>Dashboard</span>
</NavLink>
<NavLink to="werknemers" className={({ isActive })=> (isActive ? `active ${LINK_CLASSES}` : `inactive
  ${LINK_CLASSES}`)}>
  <span>Werknemers</span>
</NavLink>
<NavLink to="verzuimdossiers" className={({ isActive })=> (isActive ? `active ${LINK_CLASSES}` : `inactive
  ${LINK_CLASSES}`)}>
  <span>Verzuimdossiers</span>
</NavLink>

However, my <NavLink/> for the root "/" is always active. The other 2 work just fine. If I am on "/werknemers" I do not want the Dashboard route to be also active...

What am I missing here?

In [this question](https://stackoverflow.com/a/71849055/6060964) I saw an answer regarding `exact` in React Router V6, they have changed it to `end` apparently. Can you try that? — node_modules, Oct 05 '22 at 12:48
@node_modules Yay! That works. They keep on changing everything with the router. You can make an answer and I'll accept it if you want. — Reinier68, Oct 05 '22 at 12:49

score 3 · Accepted Answer · answered Oct 05 '22 at 12:51

In React Router you were using exact property to exactly match the URL in the browser. However, this only works in V5. In V6, they have changed it to end instead. So you have to do something like this:

<NavLink end to="/messages">Link</NavLink>

Reference documentation upgrading from V5 to V6: https://reactrouter.com/en/6.4.1/upgrading/v5#rename-navlink-exact-to-navlink-end

React router V6 is always active

1 Answers1