NavLink activeClass doesn't work with hashIntegration

Question

NavLink activeClass doesn't work with hashIntegration

Opened this issue 4 years ago · 5 comments

Active classes aren't applied when used like this in hashIntegration:

<NavLink activeClass="bg-primary text-light" class="btn btn-link ml-2" href="">
    Dashboard
</NavLink>
<NavLink activeClass="bg-primary text-light" class="btn btn-link" href="monitor">
    Monitor
</NavLink>
<NavLink activeClass="bg-primary text-light" class="btn btn-link" href="deployed">
    Deployed
</NavLink>
<NavLink activeClass="bg-primary text-light" class="btn btn-link" href="integrations">
    Integrations
</NavLink>

this is at the root of the application so clicking monitor goes to /monitor but doesn't highlight the NavLink. I think this is happening because I am hosting the app like localhost:8080/web-app#/monitor

Answer 1 · 2020-12-13T00:46:11.000Z

Hmm, looks like the activeClass prop is always just being overwritten by the default class "is-active". It's just an oversight on the way I assign the default. I'll fix that.

Answer 2 · 2020-12-13T19:19:24.000Z

Whoops, didn't mean to close with that PR merge. Anyways, should be fixed now with v0.2.2.

Answer 3 · 2020-12-13T19:23:27.000Z

Also wanted to mention that in your example, you likely want to add the end prop to your dashboard NavLink so it only matches on the "/" path.

Answer 4 · 2020-12-13T19:28:14.000Z

thanks, also thank you for publishing so fast

Answer 5 · 2020-12-13T19:34:04.000Z

You're welcome, thanks for the PR. Keep the issues coming.