十五、URL 是航线，不是附属品

import { Form, useLoaderData } from "@remix-run/react";
import { json } from "@remix-run/node";

export async function loader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url);
  const status = url.searchParams.get("status") ?? "all";
  const ships = await listShips({ status });
  return json({ ships, status });
}

export default function ShipsRoute() {
  const { ships, status } = useLoaderData<typeof loader>();

  return (
    <>
      <Form method="get">
        <select name="status" defaultValue={status}>
          <option value="all">全部</option>
          <option value="arrived">已到港</option>
          <option value="departed">已离港</option>
        </select>
        <button type="submit">筛选</button>
      </Form>

      <ul>
        {ships.map((ship) => (
          <li key={ship.id}>{ship.name}</li>
        ))}
      </ul>
    </>
  );
}