Interaction with micro-front ends

[majkelbed]

Hi,

in my company we are using tanstack/router with single-spa framework. We migrated from react-router and when navigating between MFs using single-spa navigation we spotted issue where route.useParams would return old route param ID when beforeLoad and loader would return current ID present in URL. Only after some 300-500ms route.useParams would catch up and after that in app navigation with tanstack router methods would work flawless.

After investigation I found out that recreating client on single-spa mount lifecycle resolved issue. I tried .clearCache method on unmount, but it doesn't affect this issue. Basically router client was staying in memory and with some state that after navigating into MF would cause delayed sync.

Has anyone encountered similar issue? Why beforeLoad is instant reading from URL where useParams is reading from some context and is out of sync?

[devinrhode2]

Adding keywords: microfrontend mfe microfrontends mfes vmfe module Federation

[devinrhode2]

In a different context, I've seen __root beforeLoad somehow running before the Routerprovider itself rendered. It's embarrassing and doesn't sound true but it definitely was happening. I thought... Maybe RouterProvider is a class component and react is pre-constructing the components... But idk never got to bottom of it

[devinrhode2]

I guess __root beforeLoad can fire before react renders because it's not actually dependent at all on react. It could fire as eagerly as it wants, although it may be able to read router context, which means not before createRouter