Looking for a solution to a persistent issue. Despite various attempts and exhaustive research, the problem remains unresolved.
Here's the situation: Within my React-Router-Dom setup, there is a parent component featuring a logo that remains fixed and visible across all child components/pages.
class Parent extends React.Component {
render() {
return (
<div>
{window.location.pathname==='/contact' ?
null :
<div className='originalLogo'></div>
}
</div>
) } }
On the contact page, a modified version of the logo is displayed, while the original logo is set to null.
class Child extends React.Component {
render() {
return (
<div className='modifiedLogo'></div>
)
} }
The issue arises when a user navigates back from the contact page using the browser's back button. When returning to the homepage in this manner, the logo reverts to the original version. However, if the user returns to the homepage via the menu, the logo remains in its modified state until a menu item is clicked to trigger a re-render.
How can I automatically trigger a re-render when the user goes back using the browser's back button?