React-router: Link activeClassName not being applied for dynamic routes

[musbaig]

Here is the issue I'm seeing. I have a typical navbar with several <Link>s linking to dynamically loaded (routed) components (Routes). Code-splitting for the dynamic routes is being handled with webpack and I'm also using react-router-redux to sync route state with my Redux store. (All deps are latest/greatest).

Now if I click on one of the links, the correct route is loaded, however, the <Link>'s activeClassName isn't applied. Clicking the link a second time, however, now applies the active class.

I'm wrapping <Link> in another component for styling purposes, and as such have tried using this.context.router.isActive(...); again, active styles and/or isActive flag are only triggered after the second click, not sure what is going on. Is this a bug in react-router? Any help would be greatly appreciated.

Note: this is only an issue with dynamic routes, if I were to turn them to a static ones, everything works as expected.

[musbaig]

Btw, I also submitted this question on reactiflux#react-router channel, no one has responded yet, most discussion seems to be around react-router vs rrtr, politics.

[timdorr]

We have such tests for isActive. Do you have a test case we can check against?

[ryanflorence]

@musbaig we can't really diagnose the problem without a test case, mind tossing one up on jsbin, codepen, a github repo, or a unit test in this project?

[musbaig]

After fighting with this for several days, I finally figured out the root cause of the problem. react-redux's connect() was preventing my navbar, and subsequently navlinks, from rerendering on a location state change, since navbar was no longer reading said location state directly from the Redux store, as recommended here: https://github.com/reactjs/react-router-redux#how-do-i-access-router-state-in-a-container-component.
My workaround was to pass this.props.location.pathname as a props to the navbar to force the requisite rerender. Long story short, react-router was innocent, as a result I'm closing this issue!
These are not the droids you're looking for. Move along, nothing to see here. Sorry for the inconvenience. Keep up the good work.

[taion]

@musbaig You can also set pure: false in @connect to disable suppression of context updates. See also https://github.com/reactjs/react-router/issues/470.

[musbaig]

@taion oh wow, that's cooool, great tip, thank you soo much for following up!! Works perfectly, feels more natural and a lot less hacky, cheers!

[laustdeleuran]

Perfect, this solved a similar problem with activeClassName for me. Thanks!

For newcomers, see documentation on { pure: false } here

[aleccool213]

@laustdeleuran That link should be somewhere in the react-router docs as it took me a while to find this :/

Anyways, thanks so much for the link. I am a noob to redux and react-router and this helped me immensely.

[laustdeleuran]

@aleccool213 yeah, I'm pretty new at this too, and the documentation is not that easy to find your way around in. Spent some time looking for this too, before I found this thread.

[gaearon]

This is fixed in React Router 3.0.0-alpha.1 and newer.