Remix入門③ - Remixでのルーティング、どんな感じや？

おっす！今日はRemixでのルーティングについて話してみよか。
Remixのルーティングって、実は結構特別やねん。なんでそんなにええのか？今回はその辺をわかりやすく説明していくで！

Remixのルーティングって？

Remixでのルーティングは、直感的で使いやすいんやで。URLに応じてどんなコンポーネントを表示するか、そういうことを簡単に設定できるんや。データフェッチングもルートと結びつけられるから、ページごとに必要なデータをサーバーサイドで取得できるんやで。

ディレクトリ構造のサンプル

Remixのルーティングを理解するには、ディレクトリ構造を見てみるのが一番や。以下は、典型的なRemixアプリのディレクトリ構造の例やで。

app/
├── routes/
│   ├── index.js
│   └── about.js
└── components/
    └── Header.js

この構造でな、routes ディレクトリの中に各ページのコンポーネントが配置されてるんや。たとえば、index.js はトップページ、about.js はアバウトページに対応してるわけや。

サンプルコード: ルーティングの基本

// app/routes/index.js
import { Link, Outlet } from "remix";

export default function Index() {
  return (
    <div>
      <h1>ようこそ、Remixの世界へ！</h1>
      <nav>
        <Link to="/about">アバウトページへ行ってみよう</Link>
      </nav>
      <Outlet />
    </div>
  );
}

// app/routes/about.js
export default function About() {
  return <div>ここがアバウトページやで。</div>;
}

このコードやと、トップページとアバウトページの2つのルートが設定されてるんや。それぞれがどのように表示されるか、これでバッチリやろ？

まとめ

いかがやったか？ルーティングって言うと難しそうやけど、Remixならシンプルで強力なルーティングが可能や。次回の「Remix入門④」では、もっとRemixの機能を深掘りしていくから、楽しみにしててな！