Set status codes from loaders and actions with data
.
// 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 });
// the default status code is 200, no need for `data`
return project;
}
}
See Form Validation for more information on rendering form errors like this.
Another common status code is 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;
}
See the Error Boundaries for more information on thrown data
.