`<StaticRouterProvider>`

<StaticRouterProvider> 接收來自於 createStaticRouter() 的 router，以及來自於 createStaticHandler() 的 context，並在伺服器上（例如：Node 或其他 JavaScript 執行環境）呈現你的應用程式。若要獲得更完整的概觀，請參閱伺服器端渲染指南。

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 StaticRouterProvider(props: {
  context: StaticHandlerContext;
  router: Router;
  hydrate?: boolean;
  nonce?: string;
}: JSX.Element;

`context`

這是從 createStaticHandler().query() 呼叫中傳回的 context，其中包含該請求的所有已提取資料。

`路由器`

這是透過 createStaticRouter 建立的路由器。

`hydrate`

預設情況下，<StaticRouterProvider> 會將所需的動態載入資料字串化到 <script> 標籤中的 window.__staticRouterHydrationData，而此標籤會由 createBrowserRouter() 讀取並自動動態載入。

如果你想要手動進行更進階的動態載入，可以傳遞 hydrate={false} 來停用此自動動態載入。在用戶端，你會將你自己的 hydrationData 傳遞到 createBrowserRouter。

`nonce`

當利用自動化 Hydrate 的時候，你可以提供一個要被渲染成 <script> 標籤的 nonce 值，並與你的內容安全政策一起使用。

另請參閱