How to NOT throw "not found" when route is partially matched?

[TomGruner85]

I have several micro-frontends and I use module-federation to compose a (large) single page application. The MFEs can be nested, so that one MFE pulls in several other MFEs via module-federation. In my root app I'm currently expermenting with TanStack router, where at a certain URL I want to load a certain MFE.

Let's say at /team/app1 loads app1 and /team/app2 loads app2. So far no problem /team/$path matches the URLs and the MFEs are loaded. The problem begins, however, when the MFEs also do routing. For example, app2 redirects to /app2/home on first render. My full path now becomes /team/app2/home. But /team/$path does not match that route and so I get a "Not found". Is there a way to configure a router to basically stop routing at a certain point or to not throw a "not found" on partial match?

[amit-kumar7007]

I have several micro-frontends and I use module-federation to compose a (large) single page application. The MFEs can be nested, so that one MFE pulls in several other MFEs via module-federation. In my root app I'm currently expermenting with TanStack router, where at a certain URL I want to load a certain MFE.

Let's say at /team/app1 loads app1 and /team/app2 loads app2. So far no problem /team/$path matches the URLs and the MFEs are loaded. The problem begins, however, when the MFEs also do routing. For example, app2 redirects to /app2/home on first render. My full path now becomes /team/app2/home. But /team/$path does not match that route and so I get a "Not found". Is there a way to configure a router to basically stop routing at a certain point or to not throw a "not found" on partial match?

I am also stuck at this point. Did you find anything ?

[TomGruner85]

I started using splat routes for this, rather than route params. So in my case I have these folders: src/routes/teams. The teams folder contains the splat route: $.tsx

in the splat you then need to make sure to match the MFEs to the path. I. E. Teams/app1 is mapped to app1 mfe.

[amit-kumar7007]

I started using splat routes for this, rather than route params. So in my case I have these folders: src/routes/teams. The teams folder contains the splat route: $.tsx

in the splat you then need to make sure to match the MFEs to the path. I. E. Teams/app1 is mapped to app1 mfe.

So are you creating separate router instance in remote application also?
For me
I have a shell application which pulls remote modules and run them in a container. I am currently using react-router-dom for routing and have only 1 router instance in shell.
I created splat route for remote in shell like /shell/remote1/* and defined other routes in remote application using "Route" component.
But i want to use tanstack router now. But they dont provide "Route" component and only supports code object based routing.
And i am not sure how to implement this using tanstack router.
I came with a solution but its half working

I exposed another file from remote called routes which shell application pulls and whenever i navigate to remote module i fetch the routes and update the router instance by merging them with current routes. But it doesnt work when i reload the page on some remote defined route like /shell/remote/products. Because this route doesnt exist in initial routing of shell.

[TomGruner85]

Do you work for JPMorgan? If so, you can contact me on Teams.

[amit-kumar7007]

No, I am still a student right now.