カスタムフレームワーク

@react-router/devを使用する代わりに、React Routerのフレームワーク機能（ローダー、アクション、フェッチャーなど）を独自のバンドラーおよびサーバー抽象化に統合できます。

クライアントレンダリング

1. ルーターの作成

ルートモジュールAPI（ローダー、アクションなど）を有効にするブラウザランタイムAPIはcreateBrowserRouterです。

ローダー、アクション、エラー境界などをサポートするルートオブジェクトの配列を受け取ります。React Router Viteプラグインは、routes.tsからこれを作成しますが、手動で（または抽象化を使用して）作成し、独自のバンドラーを使用することもできます。

import { createBrowserRouter } from "react-router";

let router = createBrowserRouter([
  {
    path: "/",
    Component: Root,
    children: [
      {
        path: "shows/:showId",
        Component: Show,
        loader: ({ request, params }) =>
          fetch(`/api/show/${params.id}.json`, {
            signal: request.signal,
          }),
      },
    ],
  },
]);

2. ルーターのレンダリング

ブラウザでルーターをレンダリングするには、<RouterProvider>を使用します。

import {
  createBrowserRouter,
  RouterProvider,
} from "react-router";
import { createRoot } from "react-dom/client";

createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

3. 遅延ローディング

ルートは、lazyプロパティを使用して、定義のほとんどを遅延させることができます。

createBrowserRouter([
  {
    path: "/show/:showId",
    lazy: () => {
      let [loader, action, Component] = await Promise.all([
        import("./show.action.js"),
        import("./show.loader.js"),
        import("./show.component.js"),
      ]);
      return { loader, action, Component };
    },
  },
]);

サーバーレンダリング

カスタム設定をサーバーレンダリングするには、データローディング用のいくつかのサーバーAPIが利用可能です。

このガイドでは、その仕組みについていくつかのアイデアを紹介します。より深く理解するには、カスタムフレームワークのサンプルリポジトリを参照してください。

1. ルートの定義

ルートは、クライアントと同じ種類のサーバー上のオブジェクトです。

export default [
  {
    path: "/",
    Component: Root,
    children: [
      {
        path: "shows/:showId",
        Component: Show,
        loader: ({ params }) => {
          return db.loadShow(params.id);
        },
      },
    ],
  },
];

2. 静的ハンドラーの作成

createStaticHandlerを使用して、ルートをリクエストハンドラーに変えます

import { createStaticHandler } from "react-router";
import routes from "./some-routes";

let { query, dataRoutes } = createStaticHandler(routes);

3. ルーティングコンテキストの取得とレンダリング

React Routerは、Webフェッチのリクエストで動作するため、サーバーがWebフェッチRequestオブジェクトを使用しない場合は、サーバーが使用するオブジェクトをWebフェッチRequestオブジェクトに適応させる必要があります。

このステップでは、サーバーがRequestオブジェクトを受信することを前提としています。

import { renderToString } from "react-dom/server";
import {
  createStaticHandler,
  createStaticRouter,
  StaticRouterProvider,
} from "react-router";

import routes from "./some-routes.js";

let { query, dataRoutes } = createStaticHandler(routes);

export async function handler(request: Request) {
  // 1. run actions/loaders to get the routing context with `query`
  let context = await query(request);

  // If `query` returns a Response, send it raw (a route probably a redirected)
  if (context instanceof Response) {
    return context;
  }

  // 2. Create a static router for SSR
  let router = createStaticRouter(dataRoutes, context);

  // 3. Render everything with StaticRouterProvider
  let html = renderToString(
    <StaticRouterProvider
      router={router}
      context={context}
    />
  );

  // Setup headers from action and loaders from deepest match
  let leaf = context.matches[context.matches.length - 1];
  let actionHeaders = context.actionHeaders[leaf.route.id];
  let loaderHeaders = context.loaderHeaders[leaf.route.id];
  let headers = new Headers(actionHeaders);
  if (loaderHeaders) {
    for (let [key, value] of loaderHeaders.entries()) {
      headers.append(key, value);
    }
  }

  headers.set("Content-Type", "text/html; charset=utf-8");

  // 4. send a response
  return new Response(`<!DOCTYPE html>${html}`, {
    status: context.statusCode,
    headers,
  });
}

4. ブラウザでのハイドレーション

ハイドレーションデータは、window.__staticRouterHydrationDataに埋め込まれます。これを使用してクライアント側のルーターを初期化し、<RouterProvider>をレンダリングします。

import { StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import { RouterProvider } from "react-router/dom";
import routes from "./app/routes.js";
import { createBrowserRouter } from "react-router";

let router = createBrowserRouter(routes, {
  hydrationData: window.__staticRouterHydrationData,
});

hydrateRoot(
  document,
  <StrictMode>
    <RouterProvider router={router} />
  </StrictMode>
);