Props
Props for the unstable_RSCHydratedRouter component.
Your react-server-dom-xyz/client's createFromReadableStream function,
used to decode payloads from the server.
Optionalfetch?: (request: Request) => Promise<Response>Optional fetch implementation. Defaults to global fetch.
OptionalgetContext?: () => MaybePromise<RouterContextProvider>A function that returns an RouterContextProvider instance
which is provided as the context argument to client actions,
loaders and middleware.
This function is called to generate a fresh context instance on each
navigation or fetcher call.
The decoded unstable_RSCPayload to hydrate.
OptionalrouteDiscovery?: "lazy" | "eager""eager" or "lazy" - Determines if links are eagerly discovered, or
delayed until clicked.
A hydrated DataRouter that can be used to navigate and render routes.
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import {
unstable_getRSCStream as getRSCStream,
unstable_RSCHydratedRouter as RSCHydratedRouter,
} from "react-router";
import type { unstable_RSCPayload as RSCPayload } from "react-router";
createFromReadableStream(getRSCStream()).then((payload) =>
startTransition(async () => {
hydrateRoot(
document,
<StrictMode>
<RSCHydratedRouter
createFromReadableStream={createFromReadableStream}
payload={payload}
/>
</StrictMode>,
{ formState: await getFormState(payload) },
);
}),
);
Hydrates a server rendered unstable_RSCPayload in the browser.