React 17+ guide for navigation between multiple React Applications

[andy-root]

React 17+ allows multiple React apps in a single page. In combination with module federation a React container app can render child applications that are self contained and running their own instances of react and react-router. How can I setup react-router in the container app and the remote app without sharing react-router as a singleton?

The issue I'm running into is navigating from the container app to a remote's sub page after the remote app is loaded. There is no issue navigating to a remote's sub page if the remote app is not loaded. In my case both the container app and remote app have their own BrowserRouter.

[andy-root]

How is it that the first navigation event from the container app for something like /app2/contact works but once app2 is rendered then other navigation events from the container do not work, for example /app2/home. I think what is happening is app2 will read the url when it loads and thats the only time, going forward it uses its own history object and ignores url changes.

[andy-root]

The only way I know how to solve this is to dispatch custom events when ever location changes in the container or child application. Each application will need to listen for these events and run navigate() on the event.