ルートモジュール

routes.ts で参照されるファイルは、ルートモジュールと呼ばれます。

route("teams/:teamId", "./team.tsx"),
//           route module ^^^^^^^^

ルートモジュールは、React Router のフレームワーク機能の基盤であり、以下を定義します。

自動コード分割
データの読み込み
アクション
再検証
エラー境界
など

このガイドでは、すべてのルートモジュール機能の概要を簡単に説明します。入門ガイドの残りの部分では、これらの機能をより詳細に説明します。

コンポーネント (`default`)

ルートが一致したときにレンダリングされるコンポーネントを定義します。

export default function MyRouteComponent() {
  return (
    <div>
      <h1>Look ma!</h1>
      <p>
        I'm still using React Router after like 10 years.
      </p>
    </div>
  );
}

`loader`

ルートローダーは、ルートコンポーネントがレンダリングされる前に、データを提供します。サーバーレンダリング時、またはプリレンダリングによるビルド時にのみ、サーバー上で呼び出されます。

export async function loader() {
  return { message: "Hello, world!" };
}

export default function MyRoute({ loaderData }) {
  return <h1>{loaderData.message}</h1>;
}

`clientLoader`

ブラウザでのみ呼び出されるルートクライアントローダーは、ルートローダーに加えて、またはルートローダーの代わりに、ルートコンポーネントにデータを提供します。

export async function clientLoader({ serverLoader }) {
  // call the server loader
  const serverData = await serverLoader();
  // And/or fetch data on the client
  const data = getDataFromClient();
  // Return the data to expose through useLoaderData()
  return data;
}

クライアントローダーは、関数の hydrate プロパティを設定することにより、サーバーレンダリングされたページの初期ページロードハイドレーションに参加できます。

export async function clientLoader() {
  // ...
}
clientLoader.hydrate = true as const;

as const を使用すると、TypeScript は clientLoader.hydrate の型を boolean ではなく true と推論します。これにより、React Router は clientLoader.hydrate の値に基づいて loaderData の型を導出できます。

`action`

ルートアクションを使用すると、<Form>、useFetcher、および useSubmit から呼び出されたときに、ページ上のすべてのローダーデータの自動再検証を伴うサーバー側のデータ変更が可能になります。

// route("/list", "./list.tsx")
import { Form } from "react-router";
import { TodoList } from "~/components/TodoList";

// this data will be loaded after the action completes...
export async function loader() {
  const items = await fakeDb.getItems();
  return { items };
}

// ...so that the list here is updated automatically
export default function Items({ loaderData }) {
  return (
    <div>
      <List items={loaderData.items} />
      <Form method="post" navigate={false} action="/list">
        <input type="text" name="title" />
        <button type="submit">Create Todo</button>
      </Form>
    </div>
  );
}

export async function action({ request }) {
  const data = await request.formData();
  const todo = await fakeDb.addItem({
    title: data.get("title"),
  });
  return { ok: true };
}

`clientAction`

ルートアクションと同様ですが、ブラウザでのみ呼び出されます。

export async function clientAction({ serverAction }) {
  fakeInvalidateClientSideCache();
  // can still call the server action if needed
  const data = await serverAction();
  return data;
}

`ErrorBoundary`

他のルートモジュール API がスローすると、ルートコンポーネントの代わりにルートモジュール ErrorBoundary がレンダリングされます。

import {
  isRouteErrorResponse,
  useRouteError,
} from "react-router";

export function ErrorBoundary() {
  const error = useRouteError();

  if (isRouteErrorResponse(error)) {
    return (
      <div>
        <h1>
          {error.status} {error.statusText}
        </h1>
        <p>{error.data}</p>
      </div>
    );
  } else if (error instanceof Error) {
    return (
      <div>
        <h1>Error</h1>
        <p>{error.message}</p>
        <p>The stack trace is:</p>
        <pre>{error.stack}</pre>
      </div>
    );
  } else {
    return <h1>Unknown Error</h1>;
  }
}

`HydrateFallback`

初期ページの読み込み時に、ルートコンポーネントはクライアントローダーが完了した後にのみレンダリングされます。エクスポートされている場合、HydrateFallback はルートコンポーネントの代わりにすぐにレンダリングできます。

export async function clientLoader() {
  const data = await fakeLoadLocalGameData();
  return data;
}

export function HydrateFallback() {
  return <p>Loading Game...</p>;
}

export default function Component({ loaderData }) {
  return <Game data={loaderData} />;
}

`headers`

ルートヘッダーは、サーバーレンダリング時にレスポンスと共に送信される HTTP ヘッダーを定義します。

export function headers() {
  return {
    "X-Stretchy-Pants": "its for fun",
    "Cache-Control": "max-age=300, s-maxage=3600",
  };
}

`handle`

ルートハンドルを使用すると、アプリケーションは useMatches のルートマッチに何でも追加して、抽象化（パンくずリストなど）を作成できます。

export const handle = {
  its: "all yours",
};

`links`

ルートリンクは、ドキュメントの <head> にレンダリングされる <link> 要素を定義します。

export function links() {
  return [
    {
      rel: "icon",
      href: "/favicon.png",
      type: "image/png",
    },
    {
      rel: "stylesheet",
      href: "https://example.com/some/styles.css",
    },
    {
      rel: "preload",
      href: "/images/banner.jpg",
      as: "image",
    },
  ];
}

すべてのルートリンクは集約され、通常はアプリルートにレンダリングされる <Links /> コンポーネントを介してレンダリングされます。

import { Links } from "react-router";

export default function Root() {
  return (
    <html>
      <head>
        <Links />
      </head>

      <body />
    </html>
  );
}

`meta`

ルートメタは、ドキュメントの <head> にレンダリングされるメタタグを定義します。

export function meta() {
  return [
    { title: "Very cool app" },
    {
      property: "og:title",
      content: "Very cool app",
    },
    {
      name: "description",
      content: "This app is the best",
    },
  ];
}

すべてのルートのメタは集約され、通常はアプリルートにレンダリングされる <Meta /> コンポーネントを介してレンダリングされます

import { Meta } from "react-router";

export default function Root() {
  return (
    <html>
      <head>
        <Meta />
      </head>

      <body />
    </html>
  );
}

関連項目

meta パラメータ

`shouldRevalidate`

デフォルトでは、すべてのアクション後にすべてのルートが再検証されます。この関数を使用すると、ルートはデータに影響を与えないアクションの再検証をオプトアウトできます。

import type { ShouldRevalidateFunctionArgs } from "react-router";

export function shouldRevalidate(
  arg: ShouldRevalidateFunctionArgs
) {
  return true;
}

次へ: レンダリング戦略

ルートモジュール

コンポーネント (default)

loader

clientLoader

action

clientAction

ErrorBoundary

HydrateFallback

headers

handle

links

meta

shouldRevalidate