From 4cb0fd942c7342a85277f7e8d284e1dfcc27fd07 Mon Sep 17 00:00:00 2001
From: Matt Brophy <matt@brophy.org>
Date: Tue, 3 Jan 2023 17:16:02 -0500
Subject: [PATCH 1/2] Ensure consistent component tree for useId

---
 .changeset/three-ladybugs-clap.md        |  6 +++
 packages/react-router-dom/index.tsx      |  1 -
 packages/react-router-dom/server.tsx     | 28 ++++++--------
 packages/react-router-native/index.tsx   |  1 -
 packages/react-router/index.ts           |  2 -
 packages/react-router/lib/components.tsx | 49 ++++++++++++++----------
 packages/react-router/lib/context.ts     |  8 +---
 packages/react-router/lib/hooks.tsx      | 12 ++++--
 8 files changed, 56 insertions(+), 51 deletions(-)
 create mode 100644 .changeset/three-ladybugs-clap.md

diff --git a/.changeset/three-ladybugs-clap.md b/.changeset/three-ladybugs-clap.md
new file mode 100644
index 0000000000..ae1b5177c9
--- /dev/null
+++ b/.changeset/three-ladybugs-clap.md
@@ -0,0 +1,6 @@
+---
+"react-router": patch
+"react-router-dom": patch
+---
+
+Ensure useId consistency during SSR
diff --git a/packages/react-router-dom/index.tsx b/packages/react-router-dom/index.tsx
index 831ae90c96..cf0fd14240 100644
--- a/packages/react-router-dom/index.tsx
+++ b/packages/react-router-dom/index.tsx
@@ -178,7 +178,6 @@ export {
 export {
   UNSAFE_DataRouterContext,
   UNSAFE_DataRouterStateContext,
-  UNSAFE_DataStaticRouterContext,
   UNSAFE_NavigationContext,
   UNSAFE_LocationContext,
   UNSAFE_RouteContext,
diff --git a/packages/react-router-dom/server.tsx b/packages/react-router-dom/server.tsx
index 041d09c07c..a8ac8cb10c 100644
--- a/packages/react-router-dom/server.tsx
+++ b/packages/react-router-dom/server.tsx
@@ -27,7 +27,6 @@ import {
   Router,
   UNSAFE_DataRouterContext as DataRouterContext,
   UNSAFE_DataRouterStateContext as DataRouterStateContext,
-  UNSAFE_DataStaticRouterContext as DataStaticRouterContext,
   UNSAFE_enhanceManualRouteObjects as enhanceManualRouteObjects,
 } from "react-router-dom";
 
@@ -98,6 +97,7 @@ export function StaticRouterProvider({
     router,
     navigator: getStatelessNavigator(),
     static: true,
+    staticContext: context,
     basename: context.basename || "/",
   };
 
@@ -119,22 +119,18 @@ export function StaticRouterProvider({
 
   return (
     <>
-      <DataStaticRouterContext.Provider value={context}>
-        <DataRouterContext.Provider value={dataRouterContext}>
-          <DataRouterStateContext.Provider
-            value={dataRouterContext.router.state}
+      <DataRouterContext.Provider value={dataRouterContext}>
+        <DataRouterStateContext.Provider value={dataRouterContext.router.state}>
+          <Router
+            basename={dataRouterContext.basename}
+            location={dataRouterContext.router.state.location}
+            navigationType={dataRouterContext.router.state.historyAction}
+            navigator={dataRouterContext.navigator}
           >
-            <Router
-              basename={dataRouterContext.basename}
-              location={dataRouterContext.router.state.location}
-              navigationType={dataRouterContext.router.state.historyAction}
-              navigator={dataRouterContext.navigator}
-            >
-              <Routes />
-            </Router>
-          </DataRouterStateContext.Provider>
-        </DataRouterContext.Provider>
-      </DataStaticRouterContext.Provider>
+            <Routes />
+          </Router>
+        </DataRouterStateContext.Provider>
+      </DataRouterContext.Provider>
       {hydrateScript ? (
         <script
           suppressHydrationWarning
diff --git a/packages/react-router-native/index.tsx b/packages/react-router-native/index.tsx
index b889f17913..5d66fccb83 100644
--- a/packages/react-router-native/index.tsx
+++ b/packages/react-router-native/index.tsx
@@ -125,7 +125,6 @@ export {
 export {
   UNSAFE_DataRouterContext,
   UNSAFE_DataRouterStateContext,
-  UNSAFE_DataStaticRouterContext,
   UNSAFE_NavigationContext,
   UNSAFE_LocationContext,
   UNSAFE_RouteContext,
diff --git a/packages/react-router/index.ts b/packages/react-router/index.ts
index 999d2d7eeb..2af02fef6c 100644
--- a/packages/react-router/index.ts
+++ b/packages/react-router/index.ts
@@ -76,7 +76,6 @@ import type {
 import {
   DataRouterContext,
   DataRouterStateContext,
-  DataStaticRouterContext,
   LocationContext,
   NavigationContext,
   RouteContext,
@@ -239,6 +238,5 @@ export {
   RouteContext as UNSAFE_RouteContext,
   DataRouterContext as UNSAFE_DataRouterContext,
   DataRouterStateContext as UNSAFE_DataRouterStateContext,
-  DataStaticRouterContext as UNSAFE_DataStaticRouterContext,
   enhanceManualRouteObjects as UNSAFE_enhanceManualRouteObjects,
 };
diff --git a/packages/react-router/lib/components.tsx b/packages/react-router/lib/components.tsx
index 6e879fdb46..205441b84b 100644
--- a/packages/react-router/lib/components.tsx
+++ b/packages/react-router/lib/components.tsx
@@ -87,27 +87,36 @@ export function RouterProvider({
 
   let basename = router.basename || "/";
 
+  // The fragment and {null} here are important!  We need them to keep React 18's
+  // useId happy when we are server-rendering since we may have a <script> here
+  // containing the hydrated server-side staticContext (from StaticRouterProvider).
+  // useId relies on the component tree structure to generate deterministic id's
+  // so we need to ensure it remains remains the same on the client even though
+  // we don't need the <script> tag
   return (
-    <DataRouterContext.Provider
-      value={{
-        router,
-        navigator,
-        static: false,
-        // Do we need this?
-        basename,
-      }}
-    >
-      <DataRouterStateContext.Provider value={state}>
-        <Router
-          basename={router.basename}
-          location={router.state.location}
-          navigationType={router.state.historyAction}
-          navigator={navigator}
-        >
-          {router.state.initialized ? <Routes /> : fallbackElement}
-        </Router>
-      </DataRouterStateContext.Provider>
-    </DataRouterContext.Provider>
+    <>
+      <DataRouterContext.Provider
+        value={{
+          router,
+          navigator,
+          static: false,
+          // Do we need this?
+          basename,
+        }}
+      >
+        <DataRouterStateContext.Provider value={state}>
+          <Router
+            basename={router.basename}
+            location={router.state.location}
+            navigationType={router.state.historyAction}
+            navigator={navigator}
+          >
+            {router.state.initialized ? <Routes /> : fallbackElement}
+          </Router>
+        </DataRouterStateContext.Provider>
+      </DataRouterContext.Provider>
+      {null}
+    </>
   );
 }
 
diff --git a/packages/react-router/lib/context.ts b/packages/react-router/lib/context.ts
index 6d19ea8340..e29e01ef1b 100644
--- a/packages/react-router/lib/context.ts
+++ b/packages/react-router/lib/context.ts
@@ -58,15 +58,9 @@ export interface RouteMatch<
 
 export interface DataRouteMatch extends RouteMatch<string, DataRouteObject> {}
 
-// Contexts for data routers
-export const DataStaticRouterContext =
-  React.createContext<StaticHandlerContext | null>(null);
-if (__DEV__) {
-  DataStaticRouterContext.displayName = "DataStaticRouterContext";
-}
-
 export interface DataRouterContextObject extends NavigationContextObject {
   router: Router;
+  staticContext?: StaticHandlerContext;
 }
 
 export const DataRouterContext =
diff --git a/packages/react-router/lib/hooks.tsx b/packages/react-router/lib/hooks.tsx
index bbc9d968c0..96ff63e747 100644
--- a/packages/react-router/lib/hooks.tsx
+++ b/packages/react-router/lib/hooks.tsx
@@ -38,7 +38,6 @@ import {
   RouteContext,
   RouteErrorContext,
   AwaitContext,
-  DataStaticRouterContext,
 } from "./context";
 
 /**
@@ -564,12 +563,17 @@ interface RenderedRouteProps {
 }
 
 function RenderedRoute({ routeContext, match, children }: RenderedRouteProps) {
-  let dataStaticRouterContext = React.useContext(DataStaticRouterContext);
+  let dataRouterContext = React.useContext(DataRouterContext);
 
   // Track how deep we got in our render pass to emulate SSR componentDidCatch
   // in a DataStaticRouter
-  if (dataStaticRouterContext && match.route.errorElement) {
-    dataStaticRouterContext._deepestRenderedBoundaryId = match.route.id;
+  if (
+    dataRouterContext &&
+    dataRouterContext.static &&
+    dataRouterContext.staticContext &&
+    match.route.errorElement
+  ) {
+    dataRouterContext.staticContext._deepestRenderedBoundaryId = match.route.id;
   }
 
   return (

From 190c77682fd6b97886453c355f27d0c1cb757c85 Mon Sep 17 00:00:00 2001
From: Matt Brophy <matt@brophy.org>
Date: Wed, 4 Jan 2023 09:22:54 -0500
Subject: [PATCH 2/2] Fix typo

Co-authored-by: Jacob Ebey <jacob.ebey@live.com>
---
 packages/react-router/lib/components.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-router/lib/components.tsx b/packages/react-router/lib/components.tsx
index 205441b84b..d023669a1b 100644
--- a/packages/react-router/lib/components.tsx
+++ b/packages/react-router/lib/components.tsx
@@ -91,7 +91,7 @@ export function RouterProvider({
   // useId happy when we are server-rendering since we may have a <script> here
   // containing the hydrated server-side staticContext (from StaticRouterProvider).
   // useId relies on the component tree structure to generate deterministic id's
-  // so we need to ensure it remains remains the same on the client even though
+  // so we need to ensure it remains the same on the client even though
   // we don't need the <script> tag
   return (
     <>