资源路由

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

定义资源路由

当路由模块导出一个 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",
  });
}