Why can't we use multiple routers in the same application ?

[saadflow]

Hey folks,

I want to implement a component who does stack based navigation (à la iOS) and tab based navigation. I need it to be controllable from the outside, and access any tab or stack item just with a path.
react-router seemed to be a good fit because the component's navigation is isolated, I don't need its route to be in the URL, and I figured the MemoryRouter would be a good fit. Also, it provides params out of the box, so when I have a list of items, I can just declare a route with a :param upfront.

The only issue is that I already use react-router to implement app-wide navigation, and when I try to use my component, I have an error message stating that I cannot use a router inside a router, and that an application should only have one router in total.

I'm working on a workaround where I use the router object with custom context and hooks, but It feels like reinventing the wheel, and I'm curious to understand why such a limitation ? The router state that the hooks and component access could be those of the closest parent. It's a common pattern among react libraries and there just can be no overlap between routers.

Thanks for reading this, and if you have in mind other ways to implement this, please share !

[brophdawg11]

There is an open proposal for this in #9601

[saadflow]

Thanks !