StaticRouterProvider

[MODES: data]

Summary

Reference Documentation ↗

A DataRouter that may not navigate to any other Location. This is useful on the server where there is no stateful UI.

tsx

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

Signature

tsx

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

Props

context

The StaticHandlerContext returned from StaticHandler's query

hydrate

Whether to hydrate the router on the client (default true)

nonce

The nonce to use for the hydration <script> tag

router

The static DataRouter from createStaticRouter