React Router (v6)ざっくりキャッチアップ

React Router v6：画面遷移はこれで全部できる

Reactでアプリを作っていくと、「ボタンを押して別画面に移動したい」となる。
そのとき登場するのがReact Router。中でもv6は、書き方がかなりシンプルになっていて、今ならこれ一択。

---

なぜReact Routerが必要？

Reactは「SPA（Single Page Application）」だから、HTMLレベルで画面遷移をしない。
じゃあどうするかというと、URLを変えて**「別ページっぽく見せる」**というトリックをやってる。

React Routerはその「URLと画面の対応付け」をやってくれるライブラリ。

---

基本の構成：BrowserRouter / Routes / Route

ルーティングを設定するときは、App.tsxに以下のように書く：

tsx
<BrowserRouter>
  <Routes>
    <Route path="/" element={<HomePage />} />
    <Route path="/about" element={<AboutPage />} />
  </Routes>
</BrowserRouter>

• <BrowserRouter>：アプリ全体をルーティング対応にする
• <Routes>：ルート定義のラッパー
• <Route>：URLとコンポーネントのマッピング

上記の例なら、/にアクセスするとHomePageが表示され、/aboutならAboutPageになる。

---

useNavigate()でプログラムから画面遷移

リンクだけじゃなくて、ボタンをクリックして画面遷移したいことも多い。

そんなときに使うのがuseNavigate。

tsx
const navigate = useNavigate();

const handleClick = () => {
  navigate("/about");
};

これで/aboutに画面遷移できる。Linkコンポーネントより柔軟に制御できるから、実務ではよく使う。

---

ファイル分割のコツ

今回のプロジェクト構成はかなりベーシックだけど、ページごとにファイルを分けるのは基本。

mathematica
pages/
├── HomePage.tsx
└── AboutPage.tsx

メリット：

• ページごとの責務がはっきりする
• コードの見通しが良くなる
• 将来的にLazyLoadや認可チェックを入れるときにも対応しやすい

---

よくある使い方まとめ

やりたいこと	書き方
リンクで遷移	<Link to="/about">Aboutへ</Link>
ボタンで遷移	navigate("/about")
初期表示ページを設定	/のルートにelementを指定
URLに動的な値を入れる	/users/:id みたいな形でルート定義
ルートが見つからないときの画面	<Route path="*" element={<NotFound />} />

---

学習の次ステップ

• useParams()でURLパラメータを取得してみる
• useLocation()で現在のURL情報を取得してみる
• 認証済みユーザーだけが見れるページを作る（認可ルート）
• ルーティング単位でコード分割（React.lazy）

👇 サンプルアプリ：React Router v6 基礎アプリ

---

まとめ

• React Router v6を使えば、SPAでもページ遷移が自然にできる
• RoutesとRouteの構文は簡潔で覚えやすい
• useNavigate()を使えば任意のタイミングで遷移できる
• ページごとにファイル分割することでコードの保守性が向上する