@@router/LOCATION_CHANGE fires twice

[bazalev]

The first listener subscribes in syncHistoryWithStore and the second in ConnectedRouter constructor.
Is it correct to fire this action twice on each transition?

[bazalev]

Actually, I don't understand the purpose of calling syncHistoryWithStore(history, store).
We do the same thing in ConnectedRouter's constructor.
I didn't see any changes in behavior after deleting this syncHistoryWithStore call.

[supasate]

Yes. You're right. syncHistoryWithStore is useless now. I'll remove it in the next release.

[bazalev]

Thanks!

[supasate]

@bazalev Already fixed in v1.0.0-alpha.5!

[bazalev]

Awesome!
Thank you!

[antonjohanssonse]

Hello @supasate , sorry for taggin in such an old issue. But I am migrating from react-router-redux to connected-react-router and I don't understand what I should replace syncHistoryWithStore with?

How do I convert this part to work?
const history = syncHistoryWithStore(browserHistory, store);

[ruchirV]

I still see this issue. I have bootstrapped application using redux-toolkit and eventually added connected-react-router for syncing redux store with router location. I see LOCATION_CHANGE firing twice every time Link is clicked. I tried "push" also by converting Link to a Button, but that also fired it twice. Is this an issue?

[ibocon]

I am having this issue...

[pranjul-sharma]

I am also having the same issue, LOCATION_CHANGE is getting fired twice with the connected-react-router v6.8.0

[xmd5a]

@ruchirV @ibocon @pranjul-sharma guys you probably wrapped your code inside index.js/tsx using <React.StrictMode> (which is default if you're using CRA). And this behaviour is totally fine - after builidng production version of your app this situation should not appear. You can do small proof of concept by temporary removing <React.StrictMode> wrapper.

[TomTomB]

@ruchirV @ibocon @pranjul-sharma guys you probably wrapped your code inside index.js/tsx using <React.StrictMode> (which is default if you're using CRA). And this behaviour is totally fine - after builidng production version of your app this situation should not appear. You can do small proof of concept by temporary removing <React.StrictMode> wrapper.

This is right. I've also noticed that reverting an @@router/LOCATION_CHANGE action via redux devtools fires an additional two new @@router/LOCATION_CHANGE actions. This also only applies if <React.StrictMode> is enabled. Is there maybe a better solution than removing StrictMode?

[jackdh]

I've found that moving <React.StrictMode> inside the connected router resolves the issue.

It's not perfect but better than before.

<Provider store={store}>
  <ConnectedRouter history={history}>
	<React.StrictMode>
		<App />
	</React.StrictMode>
  </ConnectedRouter>
</Provider>