Doesn't work with { connect } from 'redux'.

[FateRiddle]

basically, write a component that changes when url changes (wraps inside <BrowserRouter>):
let Path = () => <div> {location.pathname}</div>
then import { connect } from redux and
Path = connect()(Path)

Then <Path /> will no longer update itself when you change url. Why and how to solve it?

I don't really need to have everything stored inside redux store like suggested in react-router-addons-controlled. Just want redux to work with components that has its own state.

[pshrmn]

The connect HOC's shouldComponentUpdate is returning false, which prevents your <Path> component from updating. You will either need to make the connect impure or add a subscriber. For an example of the subscriber pattern, check out the <Link> component.

[FateRiddle]

So simply put, I can't use connect from redux if I decide to go with react-router v4?

[pshrmn]

No, you can use redux, but you need to be aware that react-redux uses shouldComponentUpdate as a performance enhancement. shouldComponentUpdate does not take into account context changes, so it returns false on re-renders triggered by location changes. You will need to take measures to work around this in order to ensure that connected components (and their children) are updated when the location changes. Either of the options that I mentioned will work.

[FateRiddle]

So I have to write every component in class form (instead of function short form), then subscribe to location inside componentDidMount()? How do I write the code? Would you mind giving more details?I'm still in learning process. Wait... router has a subscribe method?

[timdorr]

Just so you know, we are looking to remove sCU usage in an upcoming version of react-redux: reduxjs/react-redux#507

But this is a dupe of #4035