remix

import type { LinksFunction } from "@remix-run/node";
// existing imports

import appStylesHref from "./app.css";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: appStylesHref },
];

全てのルートはlinks関数をエクスポートできる
app/root.tsxでレンダリングした<Links />コンポーネントにレンダリングされる

いもけん

app配下にroutesディレクトリを作成してそこにルーティングを作っていくことができる
ファイルシステムルーティング的にできる

動的な場合はcontacts.$contactId.tsxのような形で書く(/contacts/[contactId] に対応する)

参考(ルートファイル命名)

いもけん

NestedRoutes

親(root.tsx)で<Outlet />を呼び出すことで子ルートが親レイアウト内でレンダリングされる

いもけん

<Link>コンポーネントを使うことでサーバー側にドキュメントを要求しなくなる
機能的にはNextjsに似てるが書き方が若干違う

<Link to={`/contacts/1`}>Your Name</Link>

いもけん

データのロードをするにはloaderとuseLoaderDataの２つのAPIを使用する
loaderでデータロードの関数を作成して、useLoaderDataを使うことでloader関数を呼び出すイメージ

loaderからデータの型推論を取得することもできる

 const { contacts } = useLoaderData<typeof loader>();

いもけん

paramの取得が楽
$contactIdこの部分を取得することができる

app/routes/contacts.$contactId.tsx

export const loader = async ({
  params,
}: LoaderFunctionArgs) => {
  invariant(params.contactId, "Missing contactId param");
  const contact = await getContact(params.contactId);
  return json({ contact });
};

いもけん

<Form>コンポーネントはブラウザがサーバーにリクエストをそう知るのを防ぎ、fetchを使ってaction関数を呼び出す