[Remix] Route File Naming (v2)について

Remix.jsのキャッチアップをしていく
今回はRoute File Naming (v2)のルーティングの設定など(特にネスト周り)についてメモ

まずv2のルーティングを利用するにはremix.config.jsで下記のようにフラグを追加する

module.exports = {
  future: {
    v2_routeConvention: true,
  },
};

ネストされたルーティング

.区切りでファイルを作成することで下記のようにルーティングを作成できる

URL	ファイル名
/layout/child	layout.child.tsx

上記のようにルーティング設定した場合 ファイル名に含まれる「.」の直前部分が別のファイルと一致する場合は親子関係となる
例えば、下記で言うとlayout.から始まるルーティングはlayout.tsxの子ルートとなる

URL	ファイル名	親
/layout	layout._index.tsx	layout.tsx
/layout/child	layout.child.tsx	layout.tsx

ちなみに、子となったコンポーネントは親のlayout.tsxの中にある<Outlet />にレンダリングされる

// layout.tsx
import { Outlet } from "@remix-run/react";

export default function Layout() {
  return (
    <div>
      <h1>Layout</h1>
      
      {/* Outletの中には`layout.child.tsx`の要素が入る */}
      {/* <div>
        <h1>Child</h1>
      </div> */}
      <Outlet />
    </div>
  );
}

// layout.child.tsx
export default function Child() {
  return (
    <div>
      <h1>Child</h1>
    </div>
  );
}

レイアウトを適用しないネストされたURL

上記のようにURLをネストしたいが、レイアウトは適用することを望まない場合がある
そのような場合は親セグメントの末尾にアンダースコアを付けることで回避できる
例えば、下記のようにlayout_.child.tsxと_を入れることでlayout.tsxのレイアウトは使用されない

URL	ファイル名	親
/layout/child	layout_.child.tsx	root.tsx
/layout/child	layout.child.tsx	layout.tsx

ネストされたURLとして適用されずレイアウトとして使用する(pathless root)

URLにパスセグメントを追加せずに、レイアウトを共有したい場合は下記のように_を設定する
下記のようにlayoutをファイル名に追加しても上述したような/layout/childではなく/childというルートとなる。しかし、レイアウトは使用できる

URL	ファイル名	親
/child	_layout.child.tsx	layout.tsx

参考

https://remix.run/docs/en/main/file-conventions/route-files-v2