使用 data
從 loaders 和 actions 設定狀態碼。
// 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 = 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 });
// the default status code is 200, no need for `data`
return project;
}
}
請參閱表單驗證以取得更多關於像這樣呈現表單錯誤的資訊。
另一個常見的狀態碼是 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) {
// throw to ErrorBoundary
throw data(null, { status: 404 });
}
return project;
}
請參閱錯誤邊界以取得更多關於拋出的 data
資訊。