Micro Frontends - Routing between remotes
HTML-код
- Опубликовано: 20 сен 2024
- In this video we'll explore how routing can be configured between a host and remote. We'll talk about patterns where the remote can own the routing configuration and how that impacts react router's context. This will dip into shared modules a bit due to how react router leverages react context.
Official MF Example:
github.com/mod...
Thanks so much, i search this for a while
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.
Can you help me find example with share routes between next js and react webpack ?
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
Hi Russel, thank you for this informative video. Why can't we directly use the createBrowserRouter directly in the remote module?
React router relies on react context, and I believe it will detect that it’s already mounted.
Thanks for sharing this. Going to try this. Do you know why it was removed from main branch?
It should be restored now
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
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
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
Love it 🎉🎉
Thanks!
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
That offical example is gone?
Looks like the repository is missing again.
check this branch, ScriptedAlchemy-patch-1
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?