ステータスコード

ローダーとアクションからdataを使ってステータスコードを設定します。

app/project.tsx

// route('/projects/:projectId', './project.tsx')
import type { Route } from "./+types/project";
import { data } from "react-router";
import { fakeDb } from "../db";
 
export async function action({
  request,
}: Route.ActionArgs) {
  let formData = await request.formData();
  let title = await formData.get("title");
  if (!title) {
    return data(
      { message: "Invalid title" },
      { status: 400 }
    );
  }
 
  if (!projectExists(title)) {
    let project = await fakeDb.createProject({ title });
    return data(project, { status: 201 });
  } else {
    let project = await fakeDb.updateProject({ title });
    // デフォルトのステータスコードは200なので、`data`は不要です
    return project;
  }
}

このようなフォームエラーのレンダリングについては、フォーム検証を参照してください。

もう1つの一般的なステータスコードは404です。

// route('/projects/:projectId', './project.tsx')
import type { Route } from "./+types/project";
import { data } from "react-router";
import { fakeDb } from "../db";
 
export async function loader({ params }: Route.ActionArgs) {
  let project = await fakeDb.getProject(params.id);
  if (!project) {
    // ErrorBoundaryにスローする
    throw data(null, { status: 404 });
  }
  return project;
}

スローされたdataについては、エラーバウンダリを参照してください。