Header and Footer MFE render on initial load but display 404 on route navigation

[rborole06]

Hey,
I have created 4 apps masterApp, Header, Footer, Table and wanted to render Header and Footer always irrespective of route and Table component should get loaded on navigating to /table route.

pastebin code for masterApp/routes/layout.tsx - https://pastebin.com/4BbhYrSe

pastebin code for masterApp/routes/page.tsx - https://pastebin.com/sKkY4fv7

1. While initial load everything works perfectly fine.

2. If Heder and Footer are rendered as MFE before and after <Outlet /> and clicked on Load table route then Table app is getting rendered but Header and Footer displays 404, not sure why?

3. If rendered text before and after <Outlet />with Math.random() number (just to see if it rerenders or not on click of /table route) then in that case that text persist as is w/o changing randomly generated number. It means it is not rerendering.

Not able to get where am I going wrong for having 2 types of behaviour. In case of rendering Header and Footer as MFE, they also should not rerender or display 404 and should persist.

Pastebin for masterApp modern.runtime.ts config - https://pastebin.com/WPG3RWB7

I am not sure if configuring the router is really required or not otherwise navigating to /table would not have loaded Table MFE which is working currently, maybe because of below setup (files inside routes folder based on conventional routing)

Tried lot of other options suggested by Github copilot but none of them is working and stuck here since few days and would appreciate any help.

Let me know if need any more details to debug the issue.

Thanks.

[rborole06]

@zllkjc Request to take a look at this. Its almost more than 2 week but no update on thread. Is it the problem of the way question is framed. Eagerly waiting for this to resolve. Tried lot of ways but no solution, no example in doc about how to persist any component across route change.
Also https://modernjs.dev/guides/topic-detail/micro-frontend/c02-development.html doc looks quite messy to me in terms of how to create conventional and self controlled based routing apps.

Please correct if wrong anywhere

[zllkjc]

sorry for missing this discussion.

I think the issue is caused by the header and footer using conventional routing. Conventional routing defaults to using React Router, which generates frontend routes.

I believe your header and footer apps only have src/routes/page.tsx, meaning they only have the / route. When the masterApp switches to /table, a 404 occurs.

You can use src/App.tsx instead, which by default won't have frontend routing.

[rborole06]

do you mean use self controlled routing in masterApp using src/App.tsx?

[zllkjc]

no, using it in header and footer

[zllkjc]

Hey, Is this problem has been solved ?

[rborole06]

Hey, I quickly checked and looks working fine but did not get time to verify once again to make sure. Allow some time, will get back on this within next 1/2 days