八、嵌套路由：一座港区里还有子码头

// app/routes/ships.tsx
import { Outlet, useLoaderData, NavLink } from "@remix-run/react";
import { json } from "@remix-run/node";
import { getShipStats } from "~/models/ship.server";

export async function loader() {
  return json({ stats: await getShipStats() });
}

export default function ShipsLayout() {
  const { stats } = useLoaderData<typeof loader>();

  return (
    <div>
      <header>
        <h1>船舶港区</h1>
        <p>今日在港：{stats.inPort}</p>
        <nav>
          <NavLink to=".">总览</NavLink>
          <NavLink to="new">新建船舶</NavLink>
        </nav>
      </header>

      <section>
        <Outlet />
      </section>
    </div>
  );
}

// app/routes/ships._index.tsx
import { useLoaderData } from "@remix-run/react";
import { json } from "@remix-run/node";
import { listShips } from "~/models/ship.server";

export async function loader() {
  return json({ ships: await listShips() });
}

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

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

root
└── ships.tsx               船舶港区公共框架
    └── ships._index.tsx    船舶列表区