資源路由

當伺服器渲染時，路由可以提供「資源」而不是渲染元件，例如圖片、PDF、JSON 酬載、Webhook 等。

定義資源路由

按照慣例，當路由模組匯出 loader 或 action，但不匯出預設元件時，該路由就會變成資源路由。

考慮一個路由，其提供 PDF 而不是 UI

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.ActionArgs) {
  return Response.json({
    message: "I handle everything else",
  });
}