書くこと
Remixは命名規則に乗っ取る事で柔軟にRoute定義できますが、その分複雑なのでキャッチアップが難しく感じる場面もあります。
この記事では以下のポイントに絞り解説する事で、命名規則、各ファイルの役割、定義されるルーティングの一部を理解していきます。
-
.で連結する事でネストするURLを表現する - パスパラメーターの指定は
$フレフィックスで定義する -
{リソース名}.tsxと{リソース名}._index.tsxを両方配置することによりレイアウトファイルとリソースのRouteファイルを分離することができる -
Routesの命名規則に従でフォルダを作成し配下にroute.tsxまたはindex.tsxを持つことでRoute定義をフォルダで行うことができる
1. .で連結する事でネストするURLを表現する
URL/pets/familyにマッチさせるRouteを定義する場合はapp/routes/pets.family.tsxというファイルを作成します
app/routes/
└── pets.family.tsx
2. パスパラメーターの指定は$フレフィックスで定義する
URL/pets/123にマッチさせるRouteを定義する場合はapp/routes/pets.$id.tsxというファイルを作成します
app/routes/
└── pets.$id.tsx
3. {リソース名}.tsxと{リソース名}._index.tsxを両方配置することによりレイアウトファイルとリソースのRouteファイルを分離することができる
app/
├── routes/
│ ├── pets._index.tsx
│ ├── pets.$id.tsx
│ └── pets.tsx
└── root.tsx
上記のファイル構成の場合はルーティングは次のようになります。
- URL
/petsにアクセスするとpets._index.tsxが描画される - URL
/pets/123にアクセスするとpets.$id.tsxが描画される -
pets.tsxはpets._index.tsxとpets.$id.tsx両方のレイアウトファイルになる
pets.tsxが存在しない場合はpets._index.tsxとpets.$id.tsxにはルートのレイアウトファイルであるroot.tsxが適応されます
4. Routesの命名規則に従でフォルダを作成し配下にroute.tsxまたはindex.tsxを持つことでRoute定義をフォルダで行うことができる
以下のようにpets.$idとpets._index2つのディレクトリを作成し、それぞれのディレクトリの配下にindex.tsxを配置することで、ディレクトリの名称でRoute`定義が可能です。
これにより、pets._indexディレクトリの中でのみ使用するpet-create-form.tsxをindex.tsxと同じディレクトリに配置し管理するコンポーネントのコロケーションを実現します。
app/routes/
├── pets.$id
│ ├── index.tsx
│ └── pet.tsx
├── pets._index
│ ├── index.tsx
│ ├── pet-create-form.tsx
│ └── pets-table.tsx
└── pets.tsx
Routesをディレクトリで管理する方法は、リファレンスのScalingセクションでも推奨されています
まとめ
これらを踏まえると、以下のファイル構成を例にそれぞれのファイルの役割が把握できると思います。
app/routes/
├── pets.$id // `/pets/123`にマッチ
│ ├── index.tsx // `/pets/123`の`route`ファイル
│ └── pet.tsx // `index.tsx`から使用されるコンポーネント
├── pets._index // `/pets`にマッチ
│ ├── index.tsx // `/pets`の`route`ファイル
│ ├── pet-create-form.tsx // `index.tsx`から使用されるコンポーネント
│ └── pets-table.tsx // `index.tsx`から使用されるコンポーネント
└── pets.tsx // `pets.$id`と`pets._index`のレイアウトファイル
リファレンス
他にも命名規則によるルーティングの定義方法がたくさんあります
バージョン
remix -v
2.9.1