fix: remove router context caching (#6734)

Author: schiller-manuel

packages/react-router/src/RouterProvider.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Matches } from './Matches'
-import { getRouterContext } from './routerContext'
+import { routerContext } from './routerContext'
 import type {
   AnyRouter,
   RegisteredRouter,
@@ -33,8 +33,6 @@ export function RouterContextProvider<
     })
   }
 
-  const routerContext = getRouterContext()
-
   const provider = (
     <routerContext.Provider value={router as AnyRouter}>
       {children}

packages/react-router/src/index.tsx

@@ -298,10 +298,6 @@ export { useNavigate, Navigate } from './useNavigate'
 export { useParams } from './useParams'
 export { useSearch } from './useSearch'
 
-export {
-  getRouterContext, // SSR
-} from './routerContext'
-
 export { useRouteContext } from './useRouteContext'
 export { useRouter } from './useRouter'
 export { useRouterState } from './useRouterState'

packages/react-router/src/routerContext.tsx

@@ -1,24 +1,4 @@
 import * as React from 'react'
 import type { AnyRouter } from '@tanstack/router-core'
 
-declare global {
-  interface Window {
-    __TSR_ROUTER_CONTEXT__?: React.Context<AnyRouter>
-  }
-}
-
-const routerContext = React.createContext<AnyRouter>(null!)
-
-export function getRouterContext() {
-  if (typeof document === 'undefined') {
-    return routerContext
-  }
-
-  if (window.__TSR_ROUTER_CONTEXT__) {
-    return window.__TSR_ROUTER_CONTEXT__
-  }
-
-  window.__TSR_ROUTER_CONTEXT__ = routerContext as any
-
-  return routerContext
-}
+export const routerContext = React.createContext<AnyRouter>(null!)

packages/react-router/src/useRouter.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import warning from 'tiny-warning'
-import { getRouterContext } from './routerContext'
+import { routerContext } from './routerContext'
 import type { AnyRouter, RegisteredRouter } from '@tanstack/router-core'
 
 /**
@@ -16,7 +16,7 @@ import type { AnyRouter, RegisteredRouter } from '@tanstack/router-core'
 export function useRouter<TRouter extends AnyRouter = RegisteredRouter>(opts?: {
   warn?: boolean
 }): TRouter {
-  const value = React.useContext(getRouterContext())
+  const value = React.useContext(routerContext)
   warning(
     !((opts?.warn ?? true) && !value),
     'useRouter must be used inside a <RouterProvider> component!',

packages/solid-router/src/RouterProvider.tsx

@@ -1,4 +1,4 @@
-import { getRouterContext } from './routerContext'
+import { routerContext } from './routerContext'
 import { SafeFragment } from './SafeFragment'
 import { Matches } from './Matches'
 import type {
@@ -28,8 +28,6 @@ export function RouterContextProvider<
     },
   })
 
-  const routerContext = getRouterContext()
-
   const OptionalWrapper = router.options.Wrap || SafeFragment
 
   return (

packages/solid-router/src/index.tsx

@@ -304,10 +304,6 @@ export { useNavigate, Navigate } from './useNavigate'
 export { useParams } from './useParams'
 export { useSearch } from './useSearch'
 
-export {
-  getRouterContext, // SSR
-} from './routerContext'
-
 export { useRouteContext } from './useRouteContext'
 export { useRouter } from './useRouter'
 export { useRouterState } from './useRouterState'

packages/solid-router/src/routerContext.tsx

@@ -1,26 +1,6 @@
 import * as Solid from 'solid-js'
 import type { AnyRouter } from '@tanstack/router-core'
 
-declare global {
-  interface Window {
-    __TSR_ROUTER_CONTEXT__?: Solid.Context<AnyRouter>
-  }
-}
-
-const routerContext = Solid.createContext<AnyRouter>(
+export const routerContext = Solid.createContext<AnyRouter>(
   null as unknown as AnyRouter,
 )
-
-export function getRouterContext() {
-  if (typeof document === 'undefined') {
-    return routerContext
-  }
-
-  if (window.__TSR_ROUTER_CONTEXT__) {
-    return window.__TSR_ROUTER_CONTEXT__
-  }
-
-  window.__TSR_ROUTER_CONTEXT__ = routerContext as any
-
-  return routerContext
-}

packages/solid-router/src/useRouter.tsx

@@ -1,12 +1,12 @@
 import * as Solid from 'solid-js'
 import warning from 'tiny-warning'
-import { getRouterContext } from './routerContext'
+import { routerContext } from './routerContext'
 import type { AnyRouter, RegisteredRouter } from '@tanstack/router-core'
 
 export function useRouter<TRouter extends AnyRouter = RegisteredRouter>(opts?: {
   warn?: boolean
 }): TRouter {
-  const value = Solid.useContext(getRouterContext() as any)
+  const value = Solid.useContext(routerContext as any)
   warning(
     !((opts?.warn ?? true) && !value),
     'useRouter must be used inside a <RouterProvider> component!',

packages/vue-router/src/index.tsx

@@ -298,10 +298,6 @@ export { useNavigate, Navigate } from './useNavigate'
 export { useParams } from './useParams'
 export { useSearch } from './useSearch'
 
-export {
-  getRouterContext, // SSR
-} from './routerContext'
-
 export { useRouteContext } from './useRouteContext'
 export { useRouter } from './useRouter'
 export { useRouterState } from './useRouterState'

packages/vue-router/src/routerContext.tsx

@@ -1,49 +1,22 @@
 import * as Vue from 'vue'
 import type { AnyRouter } from '@tanstack/router-core'
 
-// Create a router context symbol
-export const RouterSymbol = Symbol(
+export const routerContext = Symbol(
   'TanStackRouter',
 ) as Vue.InjectionKey<AnyRouter>
 
-declare global {
-  interface Window {
-    __TSR_ROUTER_CONTEXT__?: Vue.InjectionKey<AnyRouter>
-  }
-}
-
-/**
- * Gets the router context, handling server-side rendering
- * and ensuring a single instance across the application
- */
-export function getRouterContext(): Vue.InjectionKey<AnyRouter> {
-  if (typeof document === 'undefined') {
-    // For SSR, return the symbol directly
-    return RouterSymbol
-  }
-
-  // In the browser, check if we have a cached context
-  if (window.__TSR_ROUTER_CONTEXT__) {
-    return window.__TSR_ROUTER_CONTEXT__
-  }
-
-  // Create and cache the context
-  window.__TSR_ROUTER_CONTEXT__ = RouterSymbol
-  return RouterSymbol
-}
-
 /**
  * Provides the router to all child components
  */
 export function provideRouter(router: AnyRouter): void {
-  Vue.provide(getRouterContext(), router)
+  Vue.provide(routerContext, router)
 }
 
 /**
  * Injects the router from the component tree
  */
 export function injectRouter(): AnyRouter {
-  const router = Vue.inject<AnyRouter | null>(getRouterContext(), null)
+  const router = Vue.inject<AnyRouter | null>(routerContext, null)
   if (!router) {
     throw new Error(
       'No TanStack Router found in component tree. Did you forget to add a RouterProvider component?',