Relax "no nested Router" rule

[alex-pex]

Hi! 👋

I'd like to propose adding support for nesting <Router> components in React Router through an optional allowNesting prop. This feature would be limited to MemoryRouter or custom Router implementation, and would enable advanced use cases where multiple Router instances can coexist within the same application while maintaining backward compatibility.

Problem

Currently, React Router explicitly prevents nesting <Router> components with an invariant error:

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

This was introduced with v6. It wasn't there on the version we are ditching (v3)

This restriction limits some legitimate use cases such as:

• Micro-frontends: Integrating sub-applications that have their own routing logic
• Reusable components: Libraries that encapsulate their own routing behavior

On our app, we use this to open multiple dialog windows which are sub-apps (think "iframe" kind of isolation).

Proposed Solution

Key Changes

1. New allowNesting prop on the <Router> component

   • Defaults to false to maintain current behavior
   • When true, allows nesting a Router inside another Router

2. RouteContext initialization

   • RouteContext is now initialized with null! instead of a default value
   • Each Router initializes its own RouteContext.Provider to avoid context conflicts
   • It is needed to avoid an error when defining the new Router routes

3. MemoryRouter support

   • MemoryRouter automatically uses allowNesting because there is less chances of conflicts, the source of truth is handled by the app and not a single origin like "browser url"

Usage Example

// Main application
<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
  </Routes>
</BrowserRouter>

// Sub-application with its own router
function NestedApp() {
  return (
    <MemoryRouter>
      <Routes>
        <Route path="dashboard" element={<Dashboard />} />
        <Route path="settings" element={<Settings />} />
      </Routes>
    </MemoryRouter>
  );
}

Considerations

• Nested routers operate independently
• Navigation within a nested router doesn't affect the parent router
• Each router maintains its own navigation and location state

Implementation

I've implemented this feature in commit alex-pex@f996571

Workaround implementations

Hack router context

If this change is rejected, I will ended up creating my own NestedMemoryRouter implementation

function NestedMemoryRouter(props: MemoryRouterProps) {
  return (
    <UNSAFE_RouteContext.Provider value={{ outlet: null, matches: [], isDataRoute: false }}>
      <UNSAFE_LocationContext.Provider value={null!}>
        <MemoryRouter {...props} />
      </UNSAFE_LocationContext.Provider>
    </UNSAFE_RouteContext.Provider>
  );
}

Colocate routers

I might also try to render routers without nesting

<BrowserRouter>...</BrowserRouter>
{popinInstances.map(i => <MemoryRouter key={i.key}>...</MemoryRouter>)}

But it will also change the behavior and rendering

[alex-pex]

If you want to test the implementation, you can check https://stackblitz.com/~/github.com/alex-pex/poc-react-router-6-mix-2?file=src/sub-app/SubApp.tsx
(it is react-router v6 patched, but the change is similar on v7)