createStaticHandlercreateStaticHandler is used to perform the data fetching and submissions on the server (i.e., Node or another Javascript runtime) prior to server-side rendering your application via <StaticRouterProvider>. 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>
);
}
declare function createStaticHandler(
routes: RouteObject[],
opts?: {
basename?: string;
}
): StaticHandler;
interface StaticHandler {
dataRoutes: AgnosticDataRouteObject[];
query(
request: Request,
opts?: {
requestContext?: unknown;
}
): Promise<StaticHandlerContext | Response>;
queryRoute(
request: Request,
opts?: {
routeId?: string;
requestContext?: unknown;
}
): Promise<any>;
}
routes/basenameThese are the same routes/basename you would pass to createBrowserRouter
handler.query(request)The handler.query() method takes in a Fetch request, performs route matching, and executes all relevant route action/loader methods depending on the request. The return context value contains all of the information required to render the HTML document for the request (route-level actionData, loaderData, errors, etc.). If any of the matched routes return or throw a redirect response, then query() will return that redirect in the form of Fetch Response.
handler.queryRoute(request, routeId?)The handler.queryRoute is a more-targeted version that queries a singular route and runs it's loader or action based on the request. You can specify a specific routeId or let it match the appropriate route automatically based on the request. The return value is the values returned from the loader or action, which is usually a Response object.
See also: