Currently we have two separate header components (Header and HeaderJustGoingBack), and a new instance of one of these is placed on every page independently. This is leading to the header component being unmounted and remounted with a fresh instance which loses the state of which language to show.
Suggested fix
We are repeating a lot of layout logic by manually adding a Header and Footer component to each page. We should have one "Layout" component that handles the logic for overall page layout (ie, always render Header, Main and Footer sections, and depending on the route, alter the way these appear). This would allow us to remove the separate instances of the header and footer components on each page, and prevent them from losing state upon path change.
Note we already have a "Layout" component, but I would argue we should rename this to something like "SharedStyledComponents" since this is not really a layout component, but instead a bunch of themed components that are shared throughout the app.
Issue
Currently we have two separate header components (Header and HeaderJustGoingBack), and a new instance of one of these is placed on every page independently. This is leading to the header component being unmounted and remounted with a fresh instance which loses the state of which language to show.
Suggested fix
We are repeating a lot of layout logic by manually adding a Header and Footer component to each page. We should have one "Layout" component that handles the logic for overall page layout (ie, always render Header, Main and Footer sections, and depending on the route, alter the way these appear). This would allow us to remove the separate instances of the header and footer components on each page, and prevent them from losing state upon path change.
Note we already have a "Layout" component, but I would argue we should rename this to something like "SharedStyledComponents" since this is not really a layout component, but instead a bunch of themed components that are shared throughout the app.