资源路由

在服务器渲染时，路由可以提供“资源”而不是渲染组件，例如图像、PDF、JSON 负载、Webhook 等。

定义资源路由

当路由模块导出加载器或操作但没有导出默认组件时，该路由按约定成为资源路由。

考虑一个提供 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.LoaderArgs) {
  return Response.json({
    message: "I handle everything else",
  });
}