リソースルート

サーバーレンダリング時、ルートはコンポーネントをレンダリングする代わりに、画像、PDF、JSONペイロード、Webhookなどの「リソース」を提供できます。

リソースルートの定義

モジュールがローダーまたはアクションをエクスポートするが、デフォルトのコンポーネントをエクスポートしない場合、慣例によりルートはリソースルートになります。

UIの代わりにPDFを提供するルートを考えてみましょう。

route("/reports/pdf/:id", "pdf-report.ts");

import type { Route } from "./+types/pdf-report";

export async function loader({ params }: Route.LoaderArgs) {
  const report = await getReport(params.id);
  const pdf = await generateReportPDF(report);
  return new Response(pdf, {
    status: 200,
    headers: {
      "Content-Type": "application/pdf",
    },
  });
}

デフォルトのエクスポートがないことに注意してください。これにより、このルートはリソースルートになります。

リソースルートへのリンク

リソースルートにリンクする場合は、<a> または <Link reloadDocument> を使用してください。そうしないと、React Routerがクライアントサイドルーティングとペイロードのフェッチを試みます（この間違いを犯すと、役立つエラーメッセージが表示されます）。

<Link reloadDocument to="/reports/pdf/123">
  View as PDF
</Link>

異なるリクエストメソッドの処理

GETリクエストはloaderによって処理され、POST、PUT、PATCH、DELETEはactionによって処理されます。

import type { Route } from "./+types/resource";

export function loader(_: Route.LoaderArgs) {
  return Response.json({ message: "I handle GET" });
}

export function action(_: Route.LoaderArgs) {
  return Response.json({
    message: "I handle everything else",
  });
}