動的ルーティング (URLパラメータ)

ブログの詳細ページ（/posts/1、/posts/2...）のように、URLの一部が変動するパターンを扱うには、 動的ルーティング（Dynamic Segments） を使用します。

ルートの定義

パスを定義する際、セグメントの先頭にコロン : を付けることで、その部分を「変数（パラメータ）」として扱うことができます。

Dynamic Segmentsの構文

以下の例では、:postId という部分が動的な値を表します。

src/main.jsxCopy
const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    children: [
      {
        path: "posts",
        element: <PostList />,
      },
      {
        path: "posts/:postId", // ここが動的ルート
        element: <PostDetail />,
      },
    ],
  },
]);

パラメータの取得 (useParams)

URLに含まれる具体的な値（例: /posts/123 の 123）を取得するには、useParams フックを使用します。

useParamsフックの使い方

このフックは、ルート定義で指定したパラメータ名をキーに持つオブジェクトを返します。

src/PostDetail.jsxCopy
import { useParams } from "react-router-dom";

const PostDetail = () => {
  // :postId と定義したので、{ postId: "..." } が返ってくる
  const { postId } = useParams();

  return (
    <div className="p-8">
      <h2 className="text-xl font-bold text-white">記事詳細</h2>
      <p className="mt-2 text-slate-400">表示中のID: <span className="text-indigo-400">{postId}</span></p>
    </div>
  );
};

動的なリンクの作成

一覧ページなどから個別の詳細ページへ誘導する際は、テンプレートリテラルなどを使ってパスを組み立てます。

リンクの生成パターン

実戦では、配列データを map 関数で回してリンクを生成するケースがほとんどです。

src/PostList.jsxCopy
import { Link } from "react-router-dom";

const PostList = () => {
  const posts = [
    { id: 1, title: "基礎から学ぶルーティング" },
    { id: "new-feature", title: "React Router最新機能" },
  ];

  return (
    <ul className="space-y-4 shadow-sm border border-white/5 bg-white/5 p-6 rounded-xl">
      {posts.map((post) => (
        <li key={post.id} className="border-b border-white/5 pb-2 last:border-0 last:pb-0">
          <Link
            to={`/posts/${post.id}`}
            className="text-indigo-400 hover:text-indigo-300 transition-colors font-medium"
          >
            {post.title}
          </Link>
        </li>
      ))}
    </ul>
  );
};

これで、URLに応じたコンテンツの切り替えが可能になりました。次は、これらのパスを活用した入れ子構造（ネスト）について詳しく見ていきましょう。