I have two react apps. The parent app loads the child app using an iframe.

I can access the top URL using window.top.location (since both apps have the same origin).

The problem is that. when the location changes, I need to update the state in my child app:

const topLocation = window.top.location;

useEffect(() => {
 // Do something
}, [topLocation]);

The problem is that the URL change doesn't trigger a re-render, so the topLocation value never changes.

Any ideas?