Remixのルーティング

ルーティングメモ

Remix v2 はファイルベースでルーティングを扱う。ファイル名に.を使うと、それがURLのスラッシュ/に変換される。例えば、hello.tsx と hello.world.tsx を作った場合、hello.tsx が /hello に、hello.world.tsx が /hello/world に対応する。

ただ、ここで重要なのは.で区切られたファイル同士が親子関係にあるという点。hello.tsx と hello.world.tsx がある場合、/hello/world へのアクセスで直接 hello.world.tsx がレンダリングされるわけではない。 /hello/world へのアクセスでは、hello.tsx 内に が設置されていなければ、hello.world.tsx の内容は表示されない。 は、親コンポーネント内でネストされた子ルートのコンテンツをレンダリングするために使われる。

もう一つ重要な点。例えば、以下の構成があったとする。

  • home
  • home.helloworld

/home/helloworldにアクセスすることでhelloworldが表示される。
ただ、/homeにアクセスした場合は/homeコンポーネントのみが参照される。中身は何も表示されない。
/homeのコンポーネントに書くこともできるけど...

export default function home() {
  return (
    <div>
      home/helloworldにアクセスするとhello worldが表示されるよ！
      <Outlet />
    </div>
  );
}

上記の場合/home/helloworld にアクセスすると、以下のように表示される...。

home/helloworldにアクセスするとhelloworldが表示されるよ！ helloworld

そのため、/home直下で表示したい内容は_index.tsxに書く。

home.tsx

export default function home() {
  return (
    <div>
      <Outlet />
    </div>
  );
}

home._index.tsx

export default function home() {
  return (
    <div>
     home/helloworldにアクセスするとhello worldが表示されるよ！
    </div>
  );
}

動的ルーティングは$をつける。

チュートリアルをちゃんと読まないでディレクトリベースのルーティングにしようとして時間を無駄にした・・・。
以下、参考資料。

チュートリアル

zenn.dev

Zennまとめ

remix.run

公式ルーティングドキュメント

remix.run

ドキュメントのFolders for Organizationをまだ理解できていない。これをチラ見して、ディレクトリベースをできると思い込んでしまってた・・・。
ディレクトリ下のroute.tsx以外はルーティングとしては扱われず、コンポーネントみたいな扱いになるのかな？