NavLink (react-router) components in nav bar do not stay active

[no-stack-dub-sack]

NavLink (react-router) components in nav bar do not stay active

[DevJett]

This because activeClassName is updating outside of redux.

You can accomplish that by setting pure to false

export default connect(mapStateToProps, null , null, { pure: false })(App)

Note that this will make your application less performant, so only do this if you have no other option

Or you can use withRouter from react-router-dom

import { withRouter } from 'react-router-dom';
export default withRouter(connect(mapStateToProps, matchDispatchToProps)(App));

[bonham000]

Yeah this thing sucks I just spent a while working on trying to make it function correctly.

If you click the home route in the Nav and then re-click any other route they seem to highlight correctly.

[no-stack-dub-sack]

If you click the home route in the Nav and then re-click any other route they seem to highlight correctly.

Well how dumb is that! Ughh...

Here's a few articles that seem to take up similar issues:

• remix-run/react-router#2483
• remix-run/react-router#3935
• remix-run/react-router#3286

[no-stack-dub-sack]

RESOLVED

By wrapping NavBar in Route component

[etiennejcharles]

If anyone comes across this post - I suggest you read this, you need to pass down the location object, in order to force an update when your component is connected to redux.

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md#the-solution