My organization has a frontend application which has a plugin interface. This can be used to integrate “nested” React applications into the frontend. I wanted to accommodate additional subpages in my plugin and used the MemoryRouter from React-Router for this. Runing my Plugin localy works fine but combined with the "parent" application I get the error message:
"You cannot render a <Router> inside another <Router>. You should never have more than one in your app."
Obviously my approach is not desirable/an antipattern, but I am wondering how I can “simulate” the behavior of a nested router, or what would be a better approach here?
You can't nest routers like the error message states. You need only one router/routing context per application.
The main/root app is rendering the router that provides the routing/navigation context to everything below it in the ReactTree, including the sub-apps, so the React sub-apps should render anything/everything but a nested router, e.g. Routes, Route, Link, etc., and not any MemoryRouter/BrowserRouter/etc.
Obviously if/when you are testing or running the sub-applications alone they will need to be rendered into something that renders and provides the router/routing context.