react-router context doesn't work with overlays

[scarf005]

Reproduction

stackblitz: https://stackblitz.com/~/github.com/issues-repros/react-router-overlay-repro
github repo: https://github.com/issues-repros/react-router-overlay-repro

System Info

System:
    OS: macOS 15.4.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 89.34 MB / 16.00 GB
    Shell: 4.0.0 - /opt/homebrew/bin/fish
  Binaries:
    Node: 23.11.0 - /opt/homebrew/bin/node
    npm: 10.9.2 - /opt/homebrew/bin/npm
    pnpm: 10.10.0 - /opt/homebrew/bin/pnpm
    bun: 1.2.6 - ~/.bun/bin/bun
  Browsers:
    Chrome: 140.0.7339.133
    Safari: 18.4
  npmPackages:
    react-router: ^7.9.1 => 7.9.1
    vite: ^7.1.2 => 7.1.5

Used Package Manager

pnpm

Expected Behavior

const Params = () => {
  const params = useParams()
  const context = useContext(NumberContext)

  return (
    <section>
      <h3>params:</h3>
      <pre>{JSON.stringify({ params, context }, null, 2)}</pre>
    </section>
  )
}

const router = createBrowserRouter([
  {
    path: ":id",
    Component: () => (
      <div>
        <h1>:id</h1>
        <Params />
        <Button
          type="primary"
          onClick={() =>
            overlay.open(({ isOpen, close }) => (
              <Drawer title="Basic Drawer" open={isOpen} onClose={close}>
                <Params />
              </Drawer>
            ))}
        >
          Open Drawer
        </Button>
      </div>
    ),
  },
])

useParams inside drawer works correctly

Actual Behavior

useParams value inside drawer is empty, unlike context value.

---

Workaround

while manually injecting RouteContext works, it's not really feasible as this workaround requires useContext and our project has hundreds of existing overlay.open patterns being used without hooks.

import { UNSAFE_RouteContext as RouteContext } from "react-router"

const Page = () => {
  const context = useContext(RouteContext)
  return (
    <Button
      type="primary"
      onClick={() =>
        overlay.open(({ isOpen, close }) => (
          <RouteContext.Provider value={context}>
            <Drawer title="Basic Drawer" open={isOpen} onClose={close}>
              <Params />
            </Drawer>
          </RouteContext.Provider>
        ))}
    >
      Open Drawer
    </Button>
  )
}

[brophdawg11]

This is because the overlay library injects its overlays as children of the provider, which means they end up outside of the RouterProvider subtree. You need to instead wrap the overlay provider around all of your routes via a root route: https://stackblitz.com/~/github.com/issues-repros/react-router-overlay-repro?file=src/main.tsx

[scarf005]

You need to instead wrap the overlay provider around all of your routes via a root route

thanks, this works. i guess i could recursively apply providers to paths made by https://www.npmjs.com/package/vite-plugin-pages.

diff --git a/src/main.tsx b/src/main.tsx
index adc174e..3ffd0ef 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -20,6 +20,7 @@ const router = createBrowserRouter([
   {
     path: ":id",
     Component: () => (
+      <OverlayProvider>
         <div>
           <h1>:id</h1>
           <Params />
@@ -35,6 +36,7 @@ const router = createBrowserRouter([
             Open Drawer
           </Button>
         </div>
+      </OverlayProvider>
     ),
   },
 ])
@@ -44,9 +46,7 @@ const NumberContext = createContext({ number: 1234 })
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <NumberContext.Provider value={{ number: 42 }}>
-      <OverlayProvider>
       <RouterProvider router={router} />
-      </OverlayProvider>
     </NumberContext.Provider>
   </StrictMode>,
 )

[brophdawg11]

You don't have to recursively do it - a single root route wrapping all other routes would automatically apply it to all child routes