Zenn
Open9

Remix Tutorialをやってみる

Remix
kagunyankagunyan

ビルドツールはviteで、サーバモジュールはremix-serve
Quick Startで触ったのと同様の構成

npm run devで起動するとこんな感じだった

kagunyankagunyan

あらかじめ用意されたcssをインポートする
きれい

kagunyankagunyan

サイドバーのリンクをクリックしたときのルート先を追加する

以下のようなURLに対応させたい場合、

  • /contacts/123
  • /contacts/abc

以下のパスにファイル作成する。
app/routes/contacts.$contactId.tsx
📝パス名内にある.はURLの/に対応、$は動的にセグメントを取得することが可能。

<nav>
  <ul>
    <li>
      <a href={`/contacts/1`}>Your Name</a>
    </li>
~~
kagunyankagunyan

a hrefではなくLinkを使うことでクライアントサイドでルーティングを実装する
（サーバにリクエストを送ることなくUIを変更する）

- <a href={`/contacts/1`}>Your Name</a>
+ <Link to={`/contacts/1`}>Your Name</Link>
kagunyankagunyan

データを読み込むにはloaderとuserLoaderDataをつかう
型定義をちゃんとする

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

app/routes/contacts.$contactId.tsx
この場合$contactId部分はファイル内で、params.contactIdとして値取得可能。

kagunyankagunyan

パラメータの検証とそのレスポンス

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 });
};