Active routes not changing when used with react-redux

[mertkahyaoglu]

Only initial route gets active class but when I change the route, it is still showing the first route as active.
This happens when the component containing Links is wrapped with connect like this;

export default connect(mapStateToProps, mapDispatchToProps)(Sidebar);

But when I export it as a plain component like this;

export default Sidebar;

Active links are changing correctly. Is this a bug or am I missing something?

Versions;
react-router: 2.4.0,
react-router-redux: ^4.0.4

[taion]

See previous discussions around link and pure containers.

[timdorr]

Note that this is fixed in react-router@next and 3.0.

[jimbolla]

@timdorr Any chance you can point me to the changes that made it work? I'd like to see just for educational purposes.

[mertkahyaoglu]

@jimbolla This one worked for me. Basically you pass {pure:false} to connect like this;

export default connect(mapStateToProps, mapDispatchToProps, null, {pure:false})(Sidebar);

[timdorr]

See the tail end of #470 and #3430

[paustria]

FYI. I can reproduce this again on
"react-router": "2.6.0",
"react-router-redux": "4.0.5"

[taion]

Please read earlier comments on the issue.

[paustria]

@taion I read it. So, this is expected behavior until you pass {pure:false}?

[taion]

That's how React context works. For reasons of avoiding breakage per semver, we cannot ship the workaround for this in the 2.x line.

[billyshena]

I'm currently also facing this issue and used {pure:false} as a workaround.
However, I can notice a little delay between active class being set.
Should we upgrade react-router to the 3.X version to avoid this performance issue?

Best,

[petermikitsh]

Thanks @mertkahyaoglu, that solution works for me with react-router@2.8.1 and react-redux@4.4.5.