Reactのページ移動がサクサク動く理由：画面切り替えの仕組みを理解しよう

こんにちは、とまだです。

Reactで作られたサイトを見ていて、「なんでこんなにサクサク動くんだろう」と思ったことはありませんか？

実はこれ、従来のウェブサイトとは全く違う仕組みで動いているんです。今回は、Reactのページ遷移について初心者でも理解できるように解説します。

ページ遷移とは？建物の中を移動するイメージで理解しよう

まず、ページ遷移という言葉から整理していきましょう。

従来のウェブサイトを大きなビルに例えてみます。各階が別々のページだとすると、エレベーターで移動するたびに建物を一度出て入り直すような感じです。時間もかかるし、ちょっと面倒ですよね。

一方、Reactで作られたサイトは大きなワンフロアのオフィスのようなもの。部屋から部屋へはドアを開けてすぐ移動できます。これがSPA（シングルページアプリケーション）と呼ばれる仕組みです。

なぜReactのページ遷移は速いのか

従来のウェブサイトでは、ページを移動するたびにサーバーに新しいHTMLを要求します。つまり、毎回建物を建て直すような作業が発生していたんです。

でもReactなら、必要な部分だけを書き換えます。部屋の模様替えをするだけで新しい空間が作れるイメージです。だから動作が軽快で、ユーザーも快適に使えるんです。

React Routerという道案内役

さて、大きなオフィスの中で迷子にならないためには何が必要でしょうか？そう、案内表示ですよね。

「会議室はこちら」「休憩室は2つ目の角を右」こんな案内があればスムーズに移動できます。Reactの世界では、この案内役をReact Routerが担当します。

React Routerがやってくれること

React Routerは、URLと画面を紐づける役割を持ちます。

たとえば：

• /home → トップページを表示
• /users → ユーザー一覧を表示
• /profile → プロフィール画面を表示

このように、どのURLでどの画面を見せるか管理してくれるんです。

実際にReact Routerを使ってみよう

では、実際のコードを見ながら理解を深めていきましょう。

基本的な設定方法

まず、React Routerを使うにはアプリ全体を特別なコンポーネントで包む必要があります。建物全体に案内システムを導入するイメージです。

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Users from "./pages/Users";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/users" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

このコードでは、ルート（/）にアクセスしたらHomeコンポーネントを表示します。/usersにアクセスしたらUsersコンポーネントを表示します。シンプルですよね。

404ページも忘れずに

建物の中で存在しない部屋番号を探してしまうこともあります。そんなときのために、「お探しの部屋は見つかりません」という案内も用意しておきましょう。

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/users" element={<Users />} />
  <Route path="*" element={<PageNotFound />} />
</Routes>

path="*"とすることで、どのパスにも当てはまらない場合に404ページを表示できます。

よくあるつまずきポイントと解決策

1. URLに数字を含めたい場合

ユーザーIDなど、URLに可変の値を含めたいときはどうすればいいでしょうか？

<Route path="/users/:userId" element={<UserDetail />} />

:userIdのように書くことで、/users/123や/users/456など任意の値を受け取れます。部屋番号が変わっても対応できる仕組みです。

2. リンクとボタンの使い分け

ページ移動のきっかけは主に2つあります。

リンクをクリックする場合

import { Link } from "react-router-dom";

function Navigation() {
  return (
    <nav>
      <Link to="/">ホーム</Link>
      <Link to="/users">ユーザー一覧</Link>
    </nav>
  );
}

Linkコンポーネントを使えば、普通のリンクのように動作します。

ボタンや処理の後で移動する場合

import { useNavigate } from "react-router-dom";

function LoginButton() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // ログイン処理
    navigate("/dashboard");
  };

  return (
    <button onClick={handleLogin}>
      ログイン
    </button>
  );
}

処理が終わってから移動したいときは、useNavigateフックが便利です。

3. 画面がパッと切り替わる違和感

SPAの欠点として、画面が急に切り替わって違和感を覚えることがあります。実際の建物でも、瞬間移動されたら驚きますよね。

そこで、フェードインやスライドなどアニメーションを加えることで自然な遷移を演出できます。ただし、凝りすぎると逆に使いづらくなるのでほどほどが大切です。

実務でよく使われるパターン

認証が必要なページの制御

会員限定の部屋があるように、ログインしないと見れないページも作りたいですよね。React Routerと組み合わせて、認証チェックを挟むことができます。

ネストしたルーティング

大きな部屋の中にさらに小部屋があるような構造も表現できます。管理画面の中にユーザー管理、商品管理など複数の機能がある場合に便利です。

パンくずリストの実装

今どこにいるのかを示すパンくずリストも、React Routerの情報を使えば簡単に作れます。

まとめ

Reactのページ遷移は、建物の中を効率的に移動する仕組みだと理解してください。React Routerという案内役が、URLと画面を紐づけてスムーズな移動を実現します。

最初は複雑に感じるかもしれませんが、基本的な使い方から始めれば必ず理解できます。まずは2〜3ページのシンプルなアプリから試してみてください。

実際に手を動かすことで、ページ遷移の仕組みが体感的に理解できるはずです。次回は、React Routerを使ったより実践的なテクニックを紹介していきます。