React 19 + Module Federation: Uncaught Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app.

[val1991]

After upgrading from React 18 to React 19, I started encountering the following issue in my microfrontend architecture using Webpack Module Federation and React Router v6.23.

The container app uses created via createBrowserRouter.

Each microfrontend (MFE) is lazy-loaded with React.lazy() and rendered inside .

Each MFE includes its own router context (MemoryRouter or RouterProvider).

Problem:
When switching between MFEs quickly (before the previous one has fully unmounted), I get the following error:

Uncaught Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app.
This did not happen in React 18, even with the same architecture and routing setup.

What I’ve tried:
Using MemoryRouter or RouterProvider in each MFE

Wrapping MFEs in separate blocks

Ensuring router contexts are not directly nested in the same tree

Testing both createBrowserRouter and manual BrowserRouter in the container

Attempted to control mounting/unmounting timing with useTransition() and guards

Architecture overview:

// Container
<RouterProvider router={...}>
  <Suspense fallback={<Loading />}>
    <Microfrontend />
  </Suspense>
</RouterProvider>

// Microfrontend App (loaded via Module Federation)
export const App = () => (
  <MemoryRouter>
    <Routes>
      <Route path="/" element={<Dashboard />} />
      <Route path="/other" element={<OtherPage />} />
    </Routes>
  </MemoryRouter>
);

Notes:
No router is rendered twice in the same tree — the issue only happens during fast transitions.

I suspect it’s caused by overlapping concurrent renders in React 19’s new behavior.

Questions:
Is this a known issue when using multiple isolated Routers with React 19 + Suspense + Module Federation?

Are there recommended best practices for routing isolation in microfrontends under React 19?

[Stacyy]

I’m seeing the exact same error after moving to React 19. In our case:

We also have a container using <RouterProvider> and each MFE mounting its own <MemoryRouter>.
Rapidly switching between MFEs (before the previous one unmounts) throws:

Uncaught Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app.

It never happened in React 18, so it seems tied to React 19’s concurrent rendering unmount timing.

Has anyone found a reliable way to prevent the new MFE’s router from mounting before the old one fully unmounts? Any pointers are much appreciated!

[Olia25]

I’ve run into the same issue recently and wasn’t sure if it was something I misconfigured or an actual bug. Glad to see I’m not the only one !

[tolochenkovad]

I have the same issue and I am currently unsure how to proceed with updates from React 18 to React 19 without making significant changes to my architecture.
Could you please advise on how to fix this issue?

[antrem21]

we have same issue, now we started upgrade of React 18.2 to 19 version and we have the same setup of microfrontends and routing. Please provide solution for it.

[Sergo366]

Same issue after upgrading to React 19 — getting the double error when switching MFEs quickly. Curious to hear how others are handling routing isolation now.

[Nazar-Sch]

👋 We're encountering the same issue after upgrading to React 19 in a microfrontend setup using Webpack Module Federation, React.lazy, and Suspense.

Each MFE includes its own router context, and the host app uses createBrowserRouter.
This didn’t happen in React 18, so it seems related to the new concurrent rendering behavior introduced in React 19.
❓ Is this a known issue? Are there any best practices for routing isolation in microfrontend apps under React 19? Any advice would be appreciated!

[strang999]

After upgrading to React 19, we're facing issues in our microfrontend architecture that leverages Webpack Module Federation along with React.lazy and Suspense.
Each microfrontend handles its own routing context, while the main application uses createBrowserRouter. This configuration functioned correctly in React 18 but appears to break under the new concurrent rendering model introduced in React 19.
We’d appreciate any direction.

[Legrito]

We’re encountering the same issue after upgrading to React 19, using a similar microfrontend setup. We’d appreciate any guidance or official recommendation for handling routing isolation in microfrontend architectures under React 19 — ideally without needing a full routing refactor across MFEs.

[annisokay97]

We’re running into the same error after upgrading to React 19. Any ideas on how to fix it?

[pnchnk]

me and my team also faced the same issue, any ideas how we can fix that?

[nastyache44]

I've faced the same issue, hope I'll find a solution here!

[val1991]

Fixed by removing 'react-router-dom' from shared in ModuleFederationPlugin