unstable_RSCHydratedRouter

此 API 是实验性的，可能会在次要/补丁版本中发生重大更改。请谨慎使用，并密切关注相关更改的发行说明。

摘要

在浏览器中对服务器渲染的 unstable_RSCPayload进行水合。

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

签名

function RSCHydratedRouter({
  createFromReadableStream,
  fetch: fetchImplementation = fetch,
  payload,
  routeDiscovery = "eager",
  unstable_getContext,
}: RSCHydratedRouterProps)

属性

createFromReadableStream

你的 react-server-dom-xyz/client 的 createFromReadableStream 函数，用于解码来自服务器的有效负载。

fetch

可选的 fetch 实现。默认为全局 fetch。

unstable_getContext

一个返回 unstable_RouterContextProvider 实例的函数，该实例作为 context 参数提供给客户端的 action、loader 和中间件。此函数在每次导航或 fetcher 调用时被调用以生成一个新的 context 实例。

payload

要水合的已解码 unstable_RSCPayload。

routeDiscovery

"eager" 或 "lazy" - 决定链接是立即发现，还是延迟到被点击时才发现。