Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React router NavLink exact property does not work

See original GitHub issue

When true, the active class/style will only be applied if the location is matched exactly.

<NavLink exact to="/users">
  Users
</NavLink>

Expectation: It should remove the active class when a user navigates /users/:id Actual result: It removes active class

Chakra-ui implementation

<Link
 as={NavLink}
 to="/users"
 exact
>
 Users
</Link>

Expectation: It should remove the active class when a user navigates /users/:id Actual result: It doesn’t remove active class

Issue Analytics

State:
Created 3 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

with-heartcommented, Jul 3, 2020

This is an issue with polymorphic as being incomplete in earlier Chakra versions. This prop now works as expected in 1.0, which is currently in pre-release status: https://codesandbox.io/s/elegant-frost-37n8n?file=/src/App.js

0reactions

aitsamahadcommented, Nov 6, 2020

@ljosberinn oh, sorry. I was just searching for this issue, read this discussion and saw that it isn’t solved so i just posted my problem here too. Didn’t saw that it is actually an official chakra-ui repo, my bad!