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); }