entry.client.tsx

• Framework
• Data
• Declarative

概要

このファイルはブラウザのエントリーポイントであり、あなたのサーバーエントリーモジュールにおいて、サーバーによって生成されたマークアップをハイドレーションする役割を担います。

これはブラウザで実行される最初のコードです。ここで、クライアントサイドのライブラリの初期化、クライアント専用の provider の追加など、その他のクライアントサイドコードを初期化できます。

import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import { HydratedRouter } from "react-router/dom";
 
startTransition(() => {
  hydrateRoot(
    document,
    <StrictMode>
      <HydratedRouter />
    </StrictMode>
  );
});

entry.client.tsx の生成

デフォルトでは、React Router はクライアント上であなたのアプリをハイドレーションする処理を自動で行います。以下のコマンドで、デフォルトのエントリークライアントファイルを明らかにすることができます。

npx react-router reveal