NavLink exact prop not working for react-router-dom 6

Question

I am currently using

    "react-router": "^6.0.0-beta.0",
    "react-router-dom": "^6.0.0-beta.0",

The problem with NavLink of react-router-dom that i am facing now is that the root path "/" is always active, other paths are of no problem and they are being active and inactive during toggle, its just the root path that is giving me trouble, i have searched and tried many solutions. but nothing worked. Use "exact" and "exact={true}" both, but no success.

Used this:

<NavLink
          className="iconContainer"
          exact={true}
          to="/"
          activeClassName="isActive"
        >
          <span className="menu-title">Home</span>
        </NavLink>

and Also this:


<NavLink
          className="iconContainer"
          exact
          to="/"
          activeClassName="isActive"
        >
          <span className="menu-title">Home</span>
        </NavLink>

I have been stuck in this situation for past two days, and still no success in finding any solution. Any help will be appreciated, thanks

Edit: My routes

<Routes>
 
                <Route
                    exact
                    path="order/:orderId"
                    element={<OrderDetails />}
                ></Route>
                <Route
                    exact
                    path="orders"
                    element={<Orders />}
                ></Route>
                <Route
                    exact
                    path="/"
                    element={<Home />}
                ></Route>

                
      </Routes>

You need to pass another props: strict={true} or just strict https://reactrouter.com/web/api/NavLink/strict-bool — Freestyle09, Nov 10 '20 at 12:45
Can I see the route code, You might have missed the pah or something like that. — Satyam, Nov 10 '20 at 12:49

Freestyle09 · Accepted Answer · 2023-07-11T06:47:22.383

Exact param will no longer work on NavLink components. In version 6 Beta they have included a new param called: end

With this simply approach you just need to pass end param for your NavLink component and exact to you Route

<NavLink end to="/">
      Go to Home
    </NavLink>

~~When you write end="another-class-active" you can change your active className which is active by default.~~

As @Greg Wozniak mentioned end is a boolean so you can't change active class name with this, instead of this you can pass a function to className:

className={({ isActive }) =>
    isActive ? 'activeClassName' : undefined
}

For more information read this: https://reactrouter.com/docs/en/v6/api#navlink

Working example: https://codesandbox.io/s/vigorous-thompson-e7k8eb

~~Note that this is still version Beta so we need to wait for some fixes and official releases~~

adding ```exact strict``` to route and ```end``` to NavLink worked! — aitsamahad, Nov 12 '20 at 14:03
`end` is type `boolean`, you cannot provide a string value to it — Greg Wozniak, May 11 '22 at 13:34

ptoinson · Answer 2 · 2021-12-02T19:06:44.773

In 6.0.2 you can pass a function to className and that function gets a set of props. One of those props is "isActive". Here is how I solved it for the OP code:

<NavLink
    className={(props) => {
      return `${props.isActive ? 'isActive ' : ''}iconContainer`;
    }}
    end
    to="/"
  >
    <span className="menu-title">Home</span>
</NavLink>

Also note that the class "active" is automatically set by the NavLink.

Also note the use of end: "If the end prop is used, it will ensure this component isn't matched as "active" when its descendant paths are matched. For example, to render a link that is only active at the website root and not any other URLs"

score -3 · Answer 3 · answered Nov 11 '20 at 14:30

-3

However this how I did it, you don't have to use exact in the case of NavLink as said by the official docs, LINK TO THE DOCS

   <NavLink to="/service" className='turner'>
      Services
   </NavLink>

answered Nov 11 '20 at 14:30

Gayatri Dipali

1,171
4
16

NavLink exact prop not working for react-router-dom 6

3 Answers3