Resource Routes

When server rendering, routes can serve "resources" instead of rendering components, like images, PDFs, JSON payloads, webhooks, etc.

Defining a Resource Route

A route becomes a resource route by convention when its module exports a loader or action but does not export a default component.

Consider a route that serves a PDF instead of 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",  },  }); }

Note there is no default export. That makes this route a resource route.

Linking to Resource Routes

When linking to resource routes, use <a> or <Link reloadDocument>, otherwise React Router will attempt to use client side routing and fetching the payload (you'll get a helpful error message if you make this mistake).

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

Handling different request methods

GET requests are handled by the loader, while POST, PUT, PATCH, and DELETE are handled by the 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",  }); }