五、先看一个最小可工作的泊位

// app/routes/ships.$shipId.tsx
import type { LoaderFunctionArgs, ActionFunctionArgs } from "@remix-run/node";
import { json, redirect } from "@remix-run/node";
import { Form, useLoaderData } from "@remix-run/react";

import { getShipById, updateShipStatus } from "~/models/ship.server";

export async function loader({ params }: LoaderFunctionArgs) {
  const ship = await getShipById(params.shipId!);

  if (!ship) {
    throw new Response("船舶不存在", { status: 404 });
  }

  return json({ ship });
}

export async function action({ request, params }: ActionFunctionArgs) {
  const formData = await request.formData();
  const status = formData.get("status");

  await updateShipStatus(params.shipId!, String(status));

  return redirect(`/ships/${params.shipId}`);
}

export default function ShipDetailRoute() {
  const { ship } = useLoaderData<typeof loader>();

  return (
    <main>
      <h1>{ship.name}</h1>
      <p>当前状态：{ship.status}</p>

      <Form method="post">
        <button type="submit" name="status" value="arrived">
          标记为已到港
        </button>
        <button type="submit" name="status" value="departed">
          标记为已离港
        </button>
      </Form>
    </main>
  );
}