書くこと

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