はじめに
環境
% npm -v
10.7.0
% node -v
v20.14.0
Hello World
作成
% mkdir my-remix-app
% cd my-remix-app
% npm init -y
% npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react react-dom
% npm i -D @remix-run/dev vite
- vite.config.js の作成
- app/root.jsx の作成
実行
npx remix-serve build/server/index.js
チュートリアル
作成
mkdir my-remix-tutorial
cd my-remix-tutorial
npx create-remix@latest --template remix-run/remix/templates/remix-tutorial
実行
知識
- Remixのルートファイル規約において、
.はURL内で/を作成する
$は動的セグメントを意味し、URLParamとも呼ばれ、paramsオブジェクトでアクセスできる- 親セグメントの末尾にアンダースコアを追加することで、ネストをオプトアウトできる
| URL | Matched Route | Layout |
| / | app/routes/_index.tsx | app/root.tsx |
| /contracts/abcde | app/routes/contacts.\$contactId.tsx | app/root.tsx |
| /contracts/abcde/edit | app/routes/contacts.\$contactId_.edit.tsx | app/root.tsx |
| /contracts/abcde/destroy | app/routes/contacts.\$contactId.destroy.tsx | app/routes/contacts.\$contactId.tsx |
- app/root.tsxが最上位の親レイアウトであり、function Appをエクスポートする
- App内のOutletコンポーネントは、子ルートを親レイアウト内で描画するために必要とされる
- サイドバーのようにリンクをクリックしても更新する必要がない場合、クライアントサイドのルーティングを利用する。これには、<Link>を使用する
- useLoaderDataを使用すると、自動でDBのデータをUIに同期できる
- loaderの実装例で、contactの取得に失敗した場合、エラーページを表示するようにできる
- RemixのFormは、リクエストをサーバーに送るのではなく、クライアントサイドルーティングを使用してルートのaction関数に送る
- action関数内で、redirectできる
- NavLinkを使うと、現在アクティブなリンクがわかる
- useNavigationフックを使うと、次ページのローディング中の表示を制御できる
- ルート名
_indexは、ユーザーが親ルートの正確なパスにいるときに、このルートをマッチングしてレンダリングする
