Open9
Remix Tutorialをやってみる
kagunyanQuick Startをさらったので、次のTutorialをやってみる
既に存在しているテンプレートを使って電話帳っぽいものを作るみたい
kagunyanディレクトリ作成はスムーズ
kagunyanビルドツールはviteで、サーバモジュールはremix-serve
Quick Startで触ったのと同様の構成
npm run devで起動するとこんな感じだった
kagunyanあらかじめ用意されたcssをインポートする
きれい
kagunyanサイドバーのリンクをクリックしたときのルート先を追加する
以下のようなURLに対応させたい場合、
- /contacts/123
- /contacts/abc
以下のパスにファイル作成する。
app/routes/contacts.$contactId.tsx
📝パス名内にある.はURLの/に対応、$は動的にセグメントを取得することが可能。
<nav>
<ul>
<li>
<a href={`/contacts/1`}>Your Name</a>
</li>
~~
a hrefではなくLinkを使うことでクライアントサイドでルーティングを実装する
（サーバにリクエストを送ることなくUIを変更する）
- <a href={`/contacts/1`}>Your Name</a>
+ <Link to={`/contacts/1`}>Your Name</Link>
データを読み込むにはloaderとuserLoaderDataをつかう
型定義をちゃんとする
const { contacts } = useLoaderData<typeof loader>();
app/routes/contacts.$contactId.tsx
この場合$contactId部分はファイル内で、params.contactIdとして値取得可能。
kagunyanパラメータの検証とそのレスポンス
import invariant from "tiny-invariant";
export const loader = async ({ params }: LoaderFunctionArgs) => {
// ファイル名とコード内でパラメータ名が異なっているとき（contactId）
invariant(params.contactId, "Missing contactId param");
const contact = await getContact(params.contactId);
// contactがnullのとき
if (!contact) {
throw new Response("Not Found", { status: 404 });
}
return json({ contact });
};