资源路由

当服务器渲染时，路由可以服务“资源”而不是渲染组件，例如图像、PDF、JSON 负载、网络钩子等。

定义资源路由

按照约定，当路由模块导出 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",
  });
}