nebarf / module-federation-react-router-dom

Module federation example using nested routers
https://github.com/nebarf/module-federation-react-router-dom
39 stars 16 forks source link

Issue with child routes - MemoryRouter combining independent app route paths #4

Closed Jamison1 closed 1 year ago

Jamison1 commented 1 year ago

@nebarf I've been testing the new code and ran into an issue and not sure how to solve it.

When changing the children path in app1 to only have a "page-1" and "page-3" (eliminate page 2 completely and update all references from page-2 to page-3 in app1 and shell)

app1>src>routing>routes.tsx
...
- path: "page-2",
+ path: "page-3",

there is a console warning upon navigating to app2/page-2: No routes matched location "/page-2". Upon navigating back to app1/page-3 there is another console warning: No routes matched location "/page-3".

Navigation works fine in both scenarios.

app1>src>routing>routes.tsx
path: "/",
    element: (
      <NavigationManager>
        <Outlet /> # <== is issue here?
      </NavigationManager>
    ),

I am not that familiar with the NavigationManager for App1 but I'm wondering if this is caused by both routes for app1 and app2 being combined with createMemoryRouter.

So app2 is expecting a child route for app2/page-3 and app1 is expecting a child route for app1/page-2? If so is there a way to separate the routes so that each app only references its own routes?

nebarf commented 1 year ago

@Jamison1 I played a bit around the issue you mentioned and prepared a branch that should fix it. It's to be considered experimental yet, that's the reason it has not been merged to main branch.

I have to make some tests and also consider better alternatives. Any feedback is always appreciated, so please ping me back if you'll have any concern about such implementation.