refactor(react-router): Fix useRoutesImpl for SSR (#10395)

Author: brophdawg11

package.json

@@ -108,7 +108,7 @@
       "none": "45.8 kB"
     },
     "packages/react-router/dist/react-router.production.min.js": {
-      "none": "12.9 kB"
+      "none": "13 kB"
     },
     "packages/react-router/dist/umd/react-router.production.min.js": {
       "none": "15.3 kB"

packages/react-router-dom/__tests__/exports-test.tsx

@@ -1,7 +1,10 @@
 import * as ReactRouter from "react-router";
 import * as ReactRouterDOM from "react-router-dom";
 
-let nonReExportedKeys = new Set(["UNSAFE_mapRouteProperties"]);
+let nonReExportedKeys = new Set([
+  "UNSAFE_mapRouteProperties",
+  "UNSAFE_useRoutesImpl",
+]);
 
 describe("react-router-dom", () => {
   for (let key in ReactRouter) {

packages/react-router-dom/server.tsx

@@ -6,6 +6,7 @@ import type {
   StaticHandlerContext,
   CreateStaticHandlerOptions as RouterCreateStaticHandlerOptions,
   UNSAFE_RouteManifest as RouteManifest,
+  RouterState,
 } from "@remix-run/router";
 import {
   IDLE_BLOCKER,
@@ -17,7 +18,10 @@ import {
   createStaticHandler as routerCreateStaticHandler,
   UNSAFE_convertRoutesToDataRoutes as convertRoutesToDataRoutes,
 } from "@remix-run/router";
-import { UNSAFE_mapRouteProperties as mapRouteProperties } from "react-router";
+import {
+  UNSAFE_mapRouteProperties as mapRouteProperties,
+  UNSAFE_useRoutesImpl as useRoutesImpl,
+} from "react-router";
 import type {
   DataRouteObject,
   Location,
@@ -28,7 +32,6 @@ import {
   createPath,
   parsePath,
   Router,
-  useRoutes,
   UNSAFE_DataRouterContext as DataRouterContext,
   UNSAFE_DataRouterStateContext as DataRouterStateContext,
 } from "react-router-dom";
@@ -122,17 +125,19 @@ export function StaticRouterProvider({
     hydrateScript = `window.__staticRouterHydrationData = JSON.parse(${json});`;
   }
 
+  let { state } = dataRouterContext.router;
+
   return (
     <>
       <DataRouterContext.Provider value={dataRouterContext}>
-        <DataRouterStateContext.Provider value={dataRouterContext.router.state}>
+        <DataRouterStateContext.Provider value={state}>
           <Router
             basename={dataRouterContext.basename}
-            location={dataRouterContext.router.state.location}
-            navigationType={dataRouterContext.router.state.historyAction}
+            location={state.location}
+            navigationType={state.historyAction}
             navigator={dataRouterContext.navigator}
           >
-            <DataRoutes routes={router.routes} />
+            <DataRoutes routes={router.routes} state={state} />
           </Router>
         </DataRouterStateContext.Provider>
       </DataRouterContext.Provider>
@@ -149,10 +154,12 @@ export function StaticRouterProvider({
 
 function DataRoutes({
   routes,
+  state,
 }: {
   routes: DataRouteObject[];
+  state: RouterState;
 }): React.ReactElement | null {
-  return useRoutes(routes);
+  return useRoutesImpl(routes, undefined, state);
 }
 
 function serializeErrors(

packages/react-router-native/__tests__/exports-test.tsx

@@ -1,7 +1,10 @@
 import * as ReactRouter from "react-router";
 import * as ReactRouterNative from "react-router-native";
 
-let nonReExportedKeys = new Set(["UNSAFE_mapRouteProperties"]);
+let nonReExportedKeys = new Set([
+  "UNSAFE_mapRouteProperties",
+  "UNSAFE_useRoutesImpl",
+]);
 
 describe("react-router-native", () => {
   for (let key in ReactRouter) {

packages/react-router/index.ts

@@ -109,6 +109,7 @@ import {
   useRevalidator,
   useRouteError,
   useRouteLoaderData,
+  useRoutesImpl,
 } from "./lib/hooks";
 
 // Exported for backwards compatibility, but not being used internally anymore
@@ -299,4 +300,5 @@ export {
   DataRouterStateContext as UNSAFE_DataRouterStateContext,
   mapRouteProperties as UNSAFE_mapRouteProperties,
   useRouteId as UNSAFE_useRouteId,
+  useRoutesImpl as UNSAFE_useRoutesImpl,
 };

packages/react-router/lib/components.tsx

@@ -8,6 +8,7 @@ import type {
   To,
   LazyRouteFunction,
   RelativeRoutingType,
+  RouterState,
 } from "@remix-run/router";
 import {
   Action as NavigationType,
@@ -116,7 +117,7 @@ export function RouterProvider({
             navigator={navigator}
           >
             {router.state.initialized ? (
-              <DataRoutes routes={router.routes} />
+              <DataRoutes routes={router.routes} state={state} />
             ) : (
               fallbackElement
             )}
@@ -130,11 +131,11 @@ export function RouterProvider({
 
 function DataRoutes({
   routes,
+  state,
 }: {
   routes: DataRouteObject[];
+  state: RouterState;
 }): React.ReactElement | null {
-  let state = React.useContext(DataRouterStateContext);
-  invariant(state, "No Router state available for DataRoutes");
   return useRoutesImpl(routes, undefined, state);
 }