Sync router with other router (ex vue router) for a micro-frontend setup
I was wondering if anybody already did a similar thing or has suggestions how we could sync our tanstack-router with another router for example the vue router.
We have a micro-frontend setup using module federation where our old code is still written in Vue.js and we are gradually converting pieces off the application to React.js.
ex: We have a container app in React.js that handles authentication etc and then we've split up our application into separated pieces (child apps):
- sub app: file browser (vue.js)
- sub app: addressbook (vue.js)
- sub app: reports (react.js)
We look at our location to know if we should show our react application or vue.js application (we do this with css so we don't need to booth our apps completely every time).
With this approach everything works fine except that we don't have a clean way to sync our routing between them. Especially if you use the 'back' button from the browser it has 2 times the same route in there (once for the react router and once from the vue router).
Does anybody know if we can 'sync' the history with the routers or there's a way to prevent navigation by default in the router? So that we can say 'if it is a vue app, don't navigate with the react router'.
I hope that scenario is clear and maybe somebody has some idea's how this could be achieved.
We have a micro-frontend setup using module federation where our old code is still written in Vue.js and we are gradually converting pieces off the application to React.js.
ex: We have a container app in React.js that handles authentication etc and then we've split up our application into separated pieces (child apps):
- sub app: file browser (vue.js)
- sub app: addressbook (vue.js)
- sub app: reports (react.js)
We look at our location to know if we should show our react application or vue.js application (we do this with css so we don't need to booth our apps completely every time).
With this approach everything works fine except that we don't have a clean way to sync our routing between them. Especially if you use the 'back' button from the browser it has 2 times the same route in there (once for the react router and once from the vue router).
Does anybody know if we can 'sync' the history with the routers or there's a way to prevent navigation by default in the router? So that we can say 'if it is a vue app, don't navigate with the react router'.
I hope that scenario is clear and maybe somebody has some idea's how this could be achieved.
