Hi Russel, thanks a lot for your work. I wanna know if you have any idea about react router history.push not working in remote apps if the routing path is within the host app and how to fix this weird issue
@russellcanfield Yes, the react router and react-router-dom are shared as singletons. And I don't have the routes redeclared in the remote app because I expect it to use the routes in the parent but it's still not working unfortunately. And it is also using the same routing history object reference that is declared in the host
Hi russell ..too good a video.. how will routing happen between 2 remote mfes? Like if i want to route to say /contact/form from another mfe route product/pdp where product is another remote mfe?
@@russellcanfield thanks for replying...i tried.. currently using hashrouter.. did useNavigate('/assisted/gridwall') from another mfe currently route /digital/plan but i get an error in console regarding react router-dom and all routes are handled from a host mfe which routes to root of assisted mfe and digital mfe
Isn't it possible to push routes onto the Router object in runtime? That way, if you could just import any objects via the federation you could get them from the remote and push them onto the routes list? Maybe it doesn't work that way at all in React (I'm coming from Vue where that is possible)?
Nice topic and informative video. Thanks for this, but I have a question "Why we need to have all routes in host app, I think any child MF can have its own routes and can run browser routes. If any MF is exporting single componet then it make sense to have routes in host, otherwise child should have its own routing as whole frontend app". Can you get some time to explain downside of this approach or there is some technical difficuties. Thanks
You definitely can have routes in the child, mainly you need to be careful about route conflicts and ensure you share a singleton of react router with similar versions. It really depends on the complexity of the applications and what makes sense. But in some cases, owning routes can leech requirements down into the child modules
It looks like the official example was removed, but this code is mostly identical, it's still there under another branch: github.com/module-federation/module-federation-examples/tree/try-bun/react-nested-routers
ok, like you mentioned, nesting routers are very complex. So the easy way is to have all routes in host, and basically each nested route is a separate microfrontend? /users - microfrontend1 /users/:id - - microfrontend2 /users/:id/hobbies - microfrontend3 products - microfrontend4 products/:id - microfrontend5 In example above, routing will work without any problems.
The remote should be able to use any router path, as it will send the event to the host. You don't always need events you can opt for the singleton approach to
very helpful. going trough all your MFE tutorials. thanks a lot
Can you help me find example with share routes between next js and react webpack ?
Thanks so much, i search this for a while
Thanks for sharing this. Going to try this. Do you know why it was removed from main branch?
It should be restored now
Hi Russel, thanks a lot for your work. I wanna know if you have any idea about react router history.push not working in remote apps if the routing path is within the host app and how to fix this weird issue
Is react router shared as a singleton? You may need to make sure you are working on the same object reference
@russellcanfield Yes, the react router and react-router-dom are shared as singletons. And I don't have the routes redeclared in the remote app because I expect it to use the routes in the parent but it's still not working unfortunately. And it is also using the same routing history object reference that is declared in the host
Hi russell ..too good a video.. how will routing happen between 2 remote mfes?
Like if i want to route to say /contact/form from another mfe route product/pdp where product is another remote mfe?
@@tafsianvickey you should be able to use routes as normal and either approach should work.
@@russellcanfield thanks for replying...i tried.. currently using hashrouter.. did useNavigate('/assisted/gridwall') from another mfe currently route /digital/plan but i get an error in console regarding react router-dom and all routes are handled from a host mfe which routes to root of assisted mfe and digital mfe
Love it 🎉🎉
Thanks!
That offical example is gone?
Isn't it possible to push routes onto the Router object in runtime? That way, if you could just import any objects via the federation you could get them from the remote and push them onto the routes list? Maybe it doesn't work that way at all in React (I'm coming from Vue where that is possible)?
I believe you could do that, you can mount them in the dom or import them and push, that could cause a re-render higher up in the app though
Nice topic and informative video. Thanks for this, but I have a question "Why we need to have all routes in host app, I think any child MF can have its own routes and can run browser routes. If any MF is exporting single componet then it make sense to have routes in host, otherwise child should have its own routing as whole frontend app".
Can you get some time to explain downside of this approach or there is some technical difficuties.
Thanks
You definitely can have routes in the child, mainly you need to be careful about route conflicts and ensure you share a singleton of react router with similar versions.
It really depends on the complexity of the applications and what makes sense. But in some cases, owning routes can leech requirements down into the child modules
@@russellcanfield agree 👍 thanks again
I will appreciate if you add this example to your github account, cause now I'm stuck on the same problem with routing between multiple apps :(
It looks like the official example was removed, but this code is mostly identical, it's still there under another branch:
github.com/module-federation/module-federation-examples/tree/try-bun/react-nested-routers
@@russellcanfield thanks a lot
@@russellcanfield 404
ok, like you mentioned, nesting routers are very complex. So the easy way is to have all routes in host, and basically each nested route is a separate microfrontend?
/users - microfrontend1
/users/:id - - microfrontend2
/users/:id/hobbies - microfrontend3
products - microfrontend4
products/:id - microfrontend5
In example above, routing will work without any problems.
yeah, im facing this situation right now, but what if my mfe has more than one page or has to manipulate the url params, it will not work
How can I navigate from remote to host If I want to?
The remote should be able to use any router path, as it will send the event to the host. You don't always need events you can opt for the singleton approach to
@@russellcanfield So even when I am trying to go from remote to host index route, it navigates me to remote index routes.What should I do?
@@shekharshashank9491 i have same issue, did you find solution?
Looks like the repository is missing again.
check this branch, ScriptedAlchemy-patch-1