基礎編 STEP 3
手を動かす

URL と画面遷移をつなぐ

画面一覧・詳細・404 を分ける PR として、React Router で URL とページを対応付ける段階。

カリキュラムスタート
この STEP について詳しく見る

この STEP で作るもの

  • • 一覧 / 詳細 / 404 が切り替わる画面遷移
  • • 共通レイアウトを持つルーティング

PR 目安

一覧・詳細・404 のルート追加を 1 PR に閉じ込める。

例: feature/phase3-step3-routing-pages

できるようになること

  • • URL と画面の対応関係を設計できる
  • • 1 画面ずつ増やして PR を分けるイメージを持てる

章一覧 (3)

目安時間 合計 45 分
  1. 1
    📄

    ルーティング（React Router v7）

    クライアントサイドルーティングの概念を理解し、React Router v7のcreateBrowserRouter・loader・Link・useNavigateを使いこなす

    未着手 手を動かす
  2. 2
    🧭

    一覧・詳細・404 の 3 ページを分ける

    React Router v7 で一覧ページ、動的セグメントを使った詳細ページ、NotFound の 3 ページを定義する

    未着手 25 分 手を動かす
  3. 3
    🪆

    共通レイアウトを Outlet でまとめる

    React Router の nested routes と Outlet を使って、全ページ共通のヘッダーやフッターを 1 箇所に集約する

    未着手 20 分 手を動かす