Let's say I run my react app and navigate to localhost:8080/pageA that has showHeader and showFooter set to false. And these are stored in a reducer in the session storage. When I navigate to localhost:8080/pageB (on whitch showHeader and showFooter should be set to true) it still renders with showHeader and showFooter set to false because the session storage data is not cleared and gets inherited form pageA. I'm wondering how to clear the session storage and redux data when switching to another page.
You probably need to add your codes for better description, but if you're looking to run a function when you're leaving a page(Component) you can use componentWillUnmount for class components and useEffect for functional components
componentWillUnmount :
componentWillUnmount() {
sessionStorage.clear();
//run function that clears your redux store
}
useEffect :
useEffect(() => {
return () => {
sessionStorage.clear();
//run function that clears your redux store };
}, []);