diff --git a/package.json b/package.json
index 227697dde6..f0d70a7e3e 100644
--- a/package.json
+++ b/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"
diff --git a/packages/react-router-dom/__tests__/exports-test.tsx b/packages/react-router-dom/__tests__/exports-test.tsx
index 46e24e5297..e3b479d6f1 100644
--- a/packages/react-router-dom/__tests__/exports-test.tsx
+++ b/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) {
diff --git a/packages/react-router-dom/server.tsx b/packages/react-router-dom/server.tsx
index 8b21110069..d93bd8383c 100644
--- a/packages/react-router-dom/server.tsx
+++ b/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 (
<>
-
+
-
+
@@ -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(
diff --git a/packages/react-router-native/__tests__/exports-test.tsx b/packages/react-router-native/__tests__/exports-test.tsx
index d851649e80..a73c1e42ba 100644
--- a/packages/react-router-native/__tests__/exports-test.tsx
+++ b/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) {
diff --git a/packages/react-router/index.ts b/packages/react-router/index.ts
index cf1705bda2..8167fcea9c 100644
--- a/packages/react-router/index.ts
+++ b/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,
};
diff --git a/packages/react-router/lib/components.tsx b/packages/react-router/lib/components.tsx
index 47b5266db8..9d9a40c10c 100644
--- a/packages/react-router/lib/components.tsx
+++ b/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 ? (
-
+
) : (
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);
}