React-router: Browsers' back and forward button make a connected component rerender

[oskarleonard]

React router redux

2 container routes both connected and subscribing only to the router redux reducer. hostname/route1/ and hostname/route2

1. Going to route2: Go from route1 to route2 via a Link Component. route1 is not re-rendered which i expect.
2. Going back to route1: Click browsers back button, route2 will then first be re-rendered then route1. I i would expect it to work similar to clicking a react router dom link component, ie only route1 would be rendered in this case.
3. Going forward to route2: Click browsers forward button, similar situation as in nr 2 above.

Are these behaviours intended?

I would have expected the browsers back/forward button to only trigger the container we are going to not the one we are leaving.

[timdorr]

An example of what you're seeing is really necessary here. But there are known issues with double-rendering right now. Hence the alpha status.

[oskarleonard]

Hi, thanks for quick reply. Just wanted to make sure this was a bug and not intended.
I made up a sandbox of what i see in my project here https://codesandbox.io/s/8yv7p018rl
Then follow this:

1. Only use the environment inside codesandbox (my other project is not in codesandbox though), i mean, dont open the liveview in another tab.
2. Open code sandboxs' console and the live view
3. Click Page 1
4. Click codesandboxes' liveviews' backbutton
   . What happens: Both Page1 (Route1) and Home component will render (viewing the logs in each render)
   . What i guess is expected: Only Home component should make a render
5. Using the forward button has the same behavior
6. Navigating using the Link components works great

[mahesh-beehively]

@timdorr any specific reason for deleting the comments? Looks like you want to hide your failure from the world!
This type of nature will encourage the people to fork the repo. and maintain their own copy instead of contributing to original and that will the defeat the purpose of opensource!

[timdorr]

They weren't helpful or constructive comments. I'm not hiding anything other than offtopic discussion.

[mahesh-beehively]

Agreed.
But, even if those comments are constructive they will reveal the desire to fix the issue and may encourage someone to contribute a fix!
And now instead of having debates on that, can we discuss the original issue? :)
If you can give me the glimpse of corner that can cause this rendering, I can look and can send a PR.

[E-Kuerschner]

UPDATE: The fix for my team was to simply to drop react-router-redux. We looked at our usage of it and deemed it not necessary.

I've come across this issue as well.
Using: [email protected] [email protected]

Basically in the exact same situation as @wayweary.
To maybe add more background into the mix, I have noticed that the undesired rerender occurs before the LOCATION_CHANGE action is emitted by the react-router-redux middleware - due to a change in the router.location.pathname state which the connected component observes.

What I have observed is this:

1. Click back in browser
2. address bar changes to previous page's pathname
3. current connected component rerenders
4. a LOCATION_CHANGE is dispatched with the new pathname

[technicallyfeasible]

I am having a similar issue. The problem is compounded by the fact that the previous component rerenders with the new (!) location.
I would expect a component added to a route to never render on the wrong location since it generates issues with loading data, especially since we are using query parameters in the url for state management.

[timdorr]

Closing this out since react-router-redux is deprecated. Use connected-react-router instead!

[technicallyfeasible]

so sad to see this closed since connected-react-router only works with v4