freks blog

Remixのルーティングを理解するため、かみ砕いていきます
Route File Naming | Remix を見るのがいいですが、例が足りないと思うので補足していきます

前提

app/route.tsx が一番の大元のファイル
その中の <Outlet /> で続くファイルを読み込みます

Dotで区切る

ドットでURLが区切られ、_ で始まるものはURLには現れません

/one/two にアクセスしたときに
app/routes/landing.one.tsx に <Outlet > がなかったら、app/routes/landing.one.two.tsx は読み込まれません

/one にアクセスしたときに app/routes/landing.one.tsx の <Outlet > は無視されます

/landing/three にアクセスしたときに app/routes/landing.$number.tsx が表示されます
$number に定義済の one 以外の文字列がなんでも入ってきます

Layoutを無視したい

つづいて landing_ とすると landing がLayoutにならなくなります

URLに含めたくない

_ で始まるファイルはURLには現れません
layoutファイルを変えるのに便利です

ただし、_index.tsx は特殊なファイルのため、app/routes/_index.login.tsx はできません
Index routes must not have child routes. Please remove all child routes from route path "/". のエラーになります

動的なURL

動的なURLでなくてもいけるようにするなら ($value) の形を使います

これで

export async function loader({ params }: LoaderFunctionArgs) {
  const lang = params.lang;
  return json({ lang });
}

で lang にアクセスされたURLの値が入ります
定義済のURLがあればそっちが優先され、app/routes/($lang)._index.tsx へのアクセスにはなりません

($value) はどの位置でも使えるので /places/($places) とかにもできます

特殊な記号をURLに含めたい

. とか _ が特別に扱われるので、URLに含めたいときは[] で囲むといいです

ディレクトリでURLを管理したい

/routes/ にファイルを置くとルーティングに関係してしまい、コンポーネントだけのファイルがおけません
ディレクトリで管理する方法を使うと、ルーティングに関係ないファイルがおけるようになります

ディレクトリ名がURLになります
ディレクトリ内の route.tsx だけが読み込まれ、他のファイルはルーティングと関係なくなります
なのでコンポーネントだけのファイルがおけていいです

├── app
│   ├── footer.tsx
│   └── route.tsx
├── app._index
│   └── route.tsx
├── app.sample
│   └── route.tsx

みたいにすると /app でアクセスしたら app._index/route.tsx が読み込まれます
そのLayoutが app/route.tsx になります　　 app/footer.tsx のコンポーネントを app/route.tsx で読み込んで使えていい感じですね

まとめ

ぱっと公式ドキュメントをみてふんわり使ってましたが、理解深められました

PR

スーパーユーザーなら知っておくべきLinuxシステムの仕組み

このリンクは、アフィリエイトリンクです