React Router v7 ドキュメント 日本語版

English

StaticRouterProvider

概要

リファレンスドキュメント ↗

他の Location にナビゲートできない DataRouter です。これは、ステートフルなUIがないサーバー上で役立ちます。

export async function handleRequest(request: Request) {
  let { query, dataRoutes } = createStaticHandler(routes);
  let context = await query(request));
 
  if (context instanceof Response) {
    return context;
  }
 
  let router = createStaticRouter(dataRoutes, context);
  return new Response(
    ReactDOMServer.renderToString(<StaticRouterProvider ... />),
    { headers: { "Content-Type": "text/html" } }
  );
}

シグネチャ

function StaticRouterProvider({
  context,
  router,
  hydrate = true,
  nonce,
}: StaticRouterProviderProps)

Props

context

StaticHandler の query から返される StaticHandlerContext。

hydrate

クライアントでルーターをハイドレーションするかどうか (デフォルトは true)。

nonce

ハイドレーション用の <script> タグに使用する nonce。

router

createStaticRouter からの静的な DataRouter。