Browser back button to reverse to previous redux state

Question

I have an App from create-reat-app. Very simple app with nav menu element and content element. When i click on button in the nav menu dashboard element will load in the content element. Everything worked perfectly. Then i introduced react-router so all changes happened without refreshing the browser. All goo so far.

Then i started playing with redux. Navigation on the left is for certain branches of business (i.e. London, Birmingham). After clicking on one, its id will save into redux store under page.currentBranch. Then the dashboard element will render based on what is in redux. It work fine when clicking on each one, but when hitting back or forward button, the url will change but dashboard still shows the info from the last button clicked as the redux store is not changing on browser back or forward buttons.

I have tried connected router, redux first history and multiple articles about this as well as looked through stackoverflow but still cant make this work

I Have created my first ever sandbox for this so you can understand how its all set up. Iam sure iam doing fundemegntally something wrong but cant figure out what :-)

sandbox

Appreciate any help

Answer 1

Use the useLocation hook to listen to location changes.

const location = useLocation();

useEffect(() > {
  //...Update redux accordingly
}, [location]);