TanStack Routerにおけるベストプラクティス

routes配下はルーティングのみを責務とし、基本的にコンポーネントなどは配置しないようにしたい。
pagesディレクトリを作成しておき、そこにページコンポーネントを置いてインポートして使う。
ルーティングの命名にはfoo.$bar.bazのようなフルパスを記載する方式と、foo/$bar/bazのようにディレクトリを切ってパスごとに細かくする方法の2種類がある。
これについては前者が良い。
こうすることにより、以下のメリットがある。

• routes配下をまとめてカバレッジ対象外にできる
• URLを変更したくなった時に簡単にリネームでき、コンポーネント配下の差分に影響しなくなる。
• ディレクトリの責務がルーティングに限定されるため、見やすくなりメンテナブル。後から入った人でも一目瞭然。
• ルーティングライブラリを容易に変更できる

_layoutのようなpathless layout routeと(group)のようなroute groupsの違い。
TSRではNext.jsと違い、foo.$bar.bazのような複数の連続したパスをファイル名につけることができそれがURLに反映する。
このような設計にした際に、共通レイアウトをroute.tsに設定する場合、同じパスだが共通レイアウトを適用させたいページとさせたくないページがある。
後者のroute groupsの場合、あくまでフォルダだけ別にすることにより共通レイアウトは反映されない。
前者のpathless layout routeの場合はその逆で、URLに反映しないだけでTSRの内部的にURLとして認識されるため同じURLだとしても別物扱いになる。