`<StaticRouterProvider>`

A <StaticRouterProvider> accepts a router from createStaticRouter() and a context from createStaticHandler() and renders your application on the server (i.e., Node or another Javascript runtime). For a more complete overview, please refer to the Server-Side Rendering guide.

import {
  createStaticHandler,
  createStaticRouter,
  StaticRouterProvider,
} from "react-router-dom/server";
import Root, {
  loader as rootLoader,
  ErrorBoundary as RootBoundary,
} from "./root";

const routes = [
  {
    path: "/",
    loader: rootLoader,
    Component: Root,
    ErrorBoundary: RootBoundary,
  },
];

export async function renderHtml(req) {
  let { query, dataRoutes } = createStaticHandler(routes);
  let fetchRequest = createFetchRequest(req);
  let context = await query(fetchRequest);

  // If we got a redirect response, short circuit and let our Express server
  // handle that directly
  if (context instanceof Response) {
    throw context;
  }

  let router = createStaticRouter(dataRoutes, context);
  return ReactDOMServer.renderToString(
    <React.StrictMode>
      <StaticRouterProvider
        router={router}
        context={context}
      />
    </React.StrictMode>
  );
}

Type Declaration

declare function StaticRouterProvider(props: {
  context: StaticHandlerContext;
  router: Router;
  hydrate?: boolean;
  nonce?: string;
}: JSX.Element;

`context`

This is the context returned from the createStaticHandler().query() calls which contains all of the fetched data for the request.

`router`

This is the router created via createStaticRouter

`hydrate`

By default, <StaticRouterProvider> will stringify the required hydration data onto window.__staticRouterHydrationData in a <script> tag which will be read and automatically hydrated by createBrowserRouter().

If you wish to do more advanced hydration manually, you can pass hydrate={false} to disable this automatic hydration. Client-side, you would then pass your own hydrationData to createBrowserRouter.

`nonce`

When leveraging automatic hydration, you may provide a nonce value to be rendered onto the <script> tag and used along with your Content Security Policy.

See also: