No video :(

Micro Frontends - Routing between remotes

Подписаться 878

Просмотров 5 тыс.

50% 1

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...

Опубликовано:

26 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 32

@phuocphamhuu1532 4 месяца назад

Thanks so much, i search this for a while

@ttstav3094 4 месяца назад

Can you help me find example with share routes between next js and react webpack ?

@AndrulisTravel Месяц назад

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.

@visheshsanghvi9839 Месяц назад

Hi Russel, thank you for this informative video. Why can't we directly use the createBrowserRouter directly in the remote module?

@russellcanfield 28 дней назад

React router relies on react context, and I believe it will detect that it’s already mounted.

@satishpurohit2035 22 дня назад

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

@russellcanfield 20 дней назад

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

@satishpurohit2035 19 дней назад

@@russellcanfield agree 👍 thanks again

@tafsianvickey 4 дня назад

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 4 дня назад

@@tafsianvickey you should be able to use routes as normal and either approach should work.

@tafsianvickey 4 дня назад

@@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

@breitseite-media Месяц назад

That offical example is gone?

@sandhyak.v3560 8 месяцев назад

Thanks for sharing this. Going to try this. Do you know why it was removed from main branch?

@russellcanfield 7 месяцев назад

It should be restored now

@user-bk6zx3vd4s 9 месяцев назад

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 :(

@russellcanfield 9 месяцев назад

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

@user-bk6zx3vd4s 9 месяцев назад

@@russellcanfield thanks a lot

@ttstav3094 4 месяца назад

@@russellcanfield 404

@j.erlandsson 4 месяца назад

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)?

@russellcanfield 3 месяца назад

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

@marko321123 5 месяцев назад

Love it 🎉🎉

@russellcanfield 5 месяцев назад

Thanks!

@empyrerhomann6743 2 месяца назад

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 2 месяца назад

Is react router shared as a singleton? You may need to make sure you are working on the same object reference

@empyrerhomann6743 2 месяца назад

@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

@AllanWick-rc4lc 4 месяца назад

Looks like the repository is missing again.

@SandeepJagatha 27 дней назад

check this branch, ScriptedAlchemy-patch-1

@shekharshashank9491 7 месяцев назад

How can I navigate from remote to host If I want to?

@russellcanfield 7 месяцев назад

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

@shekharshashank9491 6 месяцев назад

@@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?