Reactページ遷移の基本：スムーズに画面を切り替える方法

フロントエンド開発•2025/1/28

はじめに

Reactで開発したアプリを使っていると、クリックをしたタイミングで画面がサッと切り替わるような動きを目にすることは多いでしょう。これは、いわゆる シングルページアプリケーション (SPA)の仕組みが関わっている場合がほとんどです。従来のウェブサイトはページを移動するたびにサーバーへリクエストを送り、画面を再読み込みしていました。しかしReactなどのSPAフレームワークでは、このようなフルリロードが起こりにくい構造になっています。そのため、ユーザーが閲覧中の画面から別の画面に切り替えるときも、スムーズなページ遷移を実現できるのです。

それでは、Reactのページ遷移がどのようなしくみで動いているのかを探っていきましょう。ルーティングライブラリの役割や、アニメーション演出で画面切り替えを滑らかにする方法、実務のプロジェクトでよく見かける活用例などを幅広く紹介します。

この記事を読むとわかること

Reactにおけるページ遷移の基本的な考え方
ルーティングライブラリを使う理由とメリット
ページ遷移で起こりやすい課題とその対策
React Routerの具体的な導入手順

Reactのページ遷移とは

Reactでページ遷移という言葉を聞くと、従来のウェブアプリケーションとは少し異なるイメージを持つ人もいるかもしれません。なぜなら、伝統的なページ移動ではHTMLファイルをまるごと再読み込みしますが、Reactでは通常、DOMの一部だけを差し替える仕組みを採用するからです。

システムの規模が大きくなると、複数の画面（ページ）を行き来する場面が増えてきます。アカウントの登録画面や、ユーザープロフィールを表示する画面など、アプリ内には多種多様な機能が存在します。こうした複数の機能をまとめて管理するとき、画面単位でURLを振り分けておくと利用者も開発者も分かりやすいですよね。そこで役立つのがルーティングという仕組みであり、それを支援するライブラリとしてReact Routerがよく使われます。

シングルページアプリケーション(SPA)でのページ遷移

SPAとは、ページ全体をリロードせずに一部のデータを更新して表示を切り替える設計を指します。画面遷移のたびにサーバーにHTMLを要求するのではなく、クライアントサイドでJavaScriptが動いてDOMを更新していくのが特徴です。ユーザー視点では、同じページ内で画面が切り替わっているように見えるため、サイトの操作が軽快に感じられます。

ただし、SPAでのページ遷移はURLをどのように扱うかがポイントになります。 URLに応じて表示内容を変えたい場合、JavaScriptだけでそれらを制御する必要があります。そこでルーターという仕組みを使うと、「どのパスにアクセスされたらどのコンポーネントを表示する」といった定義をまとめて管理できるわけです。

ルーティングライブラリの重要性

ReactでSPAを構築する際、多くのプロジェクトで導入されているのがReact Routerです。これは、URLのパスをもとに、表示するコンポーネントを切り替えるためのライブラリになっています。ルーティングがないと、自分でURL変更に合わせた画面描画の仕組みを用意しなければいけません。それは煩雑ですし、メンテナンスも大変でしょう。

React Routerなら、簡潔なコードでルートパスとコンポーネントを対応づけられます。また、ページ遷移時のイベントハンドリングなども設定しやすいので、画面ごとの動きを統一できるメリットがあります。

React Routerを使ったページ遷移

実際にReact Routerを導入するときは、Reactのプロジェクトに追加ライブラリとしてインストールする形が一般的です。ここではインストール手順については細かく触れませんが、導入が終わったあとの設定方法を簡単に見ていきましょう。

ルーティングの設定方法

React Routerを使うときは、まずBrowserRouterなどのコンポーネントでアプリ全体を包むところから始めます。次に、RoutesとRouteを使って、どのパスでどのコンポーネントをレンダリングするかを指定します。


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

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

export default App;

上記では、/ にアクセスしたときはHomeコンポーネントを、/users ならUsersコンポーネントを表示するように定義しています。また、* と書くことで、どれにもマッチしないパスはPageNotFoundコンポーネントが表示されるようにしています。

ルーティングパターンの具体例

サイトによっては、ユーザー詳細ページのようにURLの一部を可変パラメータとして扱いたいケースがあります。その場合は、:id のようにパラメータを埋め込む形で書くことが多いです。


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

/users/123 のようにアクセスされると、ユーザーIDを取得してUserDetailコンポーネントに渡すような動きを実装できます。

ページ遷移時のUI

Reactでのページ遷移はフルリロードなしでサクサク動くのが特徴ですが、それでも画面切り替えの瞬間に一瞬コンテンツが消えるように見えることがあります。ユーザーからすると、いきなり表示が切り替わった印象を受けて戸惑うかもしれません。そのため、ちょっとしたアニメーションを組み合わせて「切り替わり感」を緩和する工夫がよく行われます。

ページ遷移時によくある課題

ページ遷移時に何の演出もないと、画面が急に切り替わってしまう印象があります。これを解消するために、React Transition Groupなどのライブラリを使い、フェードイン・フェードアウトやスライドインなどの動きを付与する方法が考えられます。また、データフェッチが必要な画面であれば、遷移前後でローディング表示を行うのも一つの手でしょう。

こうした工夫をすることで、「ページ遷移したはずなのに内容がまだ読み込めていない」といった違和感を軽減できます。さらに、アニメーションが加わるとユーザー体験の向上にもつながるので、全体的にアプリが見やすくなるはずです。

アニメーションで視覚効果を高める

たとえばReact Transition Groupを使うと、コンポーネントがマウントされるタイミングやアンマウントされるタイミングにフックを仕掛けてアニメーションを実行できます。ページが切り替わるときにふんわりと画面がフェードアウトして、次のページがフェードインするように設定することで、利用者に「ソフトな」切り替わりを感じさせることができます。

CSSアニメーションを活用する方法や、フレームワーク専用のアニメーション機能を使う方法など、アプローチはさまざまです。どの方法であっても、過度に派手な効果を入れすぎると逆に操作性を損なう場合もあるので、バランスを意識するとよいでしょう。

ページ遷移に関連する実務での活用シーン

実務の現場でも、Reactを用いたアプリケーション開発はよく見かけます。その中で、ページ遷移の作り込みは特に力が入る部分です。ユーザーが多い大規模プロジェクトだと、画面構成が複雑になるため、どのURLでどのコンポーネントを表示するかを明確に整理することが重要になります。

大規模プロジェクトでの採用ケース

ECサイトや管理ツールなど、数多くのページや機能を持つアプリケーションでReact Routerを導入すると、URLを基準に機能をモジュール化できます。セクションごとにRoutesを切り分けたり、ネストしたルーティングを活用したりすることで、チームメンバーがそれぞれの機能を担当しても衝突が起こりにくくなるはずです。また、画面が急激に増えたとしても、ルート定義を一覧できるため、後からの変更も比較的管理しやすくなります。

モバイルアプリでも共通化できる

React Nativeなどと組み合わせる場合、コンポーネント設計の考え方をある程度共通化できます。ただし、React NativeはWebブラウザではなくネイティブアプリの仕組みになるので、URLを意識する必要は薄いかもしれません。それでも、コンポーネントを分けてデータやUIを管理する発想は同じであり、画面遷移の概念も似ています。そのため、Reactを使ったページ遷移に慣れておくと、モバイル領域に展開するときもスムーズに理解できるというメリットがあります。

React Router導入の流れを具体例で紹介

React Routerを導入してページ遷移を構築する際、よく見かける流れを簡単に紹介します。大まかには以下のようなステップが考えられるでしょう。

Reactプロジェクトの準備
React Routerのインストール
BrowserRouterなどを使ってアプリ全体をラップ
Routes と Route でパスとコンポーネントを紐づけ
必要ならパラメータ付きルーティングや404ページを設定
リンクやボタンから Link や useNavigate を使ってページ遷移
アニメーションやローディング演出を追加

単純な構成なら、ほんの数行のルート定義とコンポーネントでページ遷移を実装できます。大規模なアプリでも同じ仕組みを拡張していけば対応可能です。

例：リンクコンポーネントを使ったページ遷移

React Routerにはリンクを作るためのLinkコンポーネントがあります。これを利用すると、アンカータグのようにユーザーがクリックしてパスを切り替えることができます。


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

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

export default Header;

<Link> には href 属性がなく、かわりに to 属性で遷移先のパスを指定します。これをクリックすると、フルリロードなしに画面を切り替えられます。

例：ボタンでページ遷移したい場合

ボタンや何らかの操作イベントをトリガーにページを移動したいときは、useNavigateフックが便利です。


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

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

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

  return (
    <button onClick={handleClick}>
      ユーザー詳細へ移動
    </button>
  );
}

export default UserDetailButton;

useNavigate() で得られる navigate 関数に対して、移動先のパスを引数で指定すると、URLが書き換わりコンポーネントが切り替わります。

エラーページや404対応

運営しているウェブアプリでは、ユーザーが存在しないURLを叩いてしまう場面が出てくるでしょう。このときに404ページなど専用のメッセージを表示してあげると、ユーザーが迷子にならずに済みます。

React Routerでは、先ほどのコード例でも触れたように、"*" というパターンを定義しておくと、マッチしないルートが指定された際に特定のコンポーネントを表示できます。例えば404ページコンポーネントとして PageNotFound を準備しておけば、予期せぬパスでアクセスされた場合はそこへ遷移させることができます。

開発中にルートが誤って設定されていると、本来は表示されるべきページにたどり着けないことがあります。複数の画面で似たようなパス名を使っている場合は、衝突しないように注意が必要です。

ページ遷移を支援する追加のライブラリ

React Router以外にも、ページ遷移やルーティングを補完する便利なライブラリが存在します。 UIアニメーションに特化したもの、状態管理と組み合わせやすいパッケージなど、選択肢は多岐にわたります。しかし、まずはReact Routerの基本機能をしっかり把握することで、十分に使いこなせるケースが多いはずです。

画面が多くなるほど、遷移時に必要なデータをいつ取得するかなどの悩みが出てきます。データフェッチライブラリと組み合わせて、遷移直後にAPIコールを行うのか、遷移前にプリフェッチを行うのかといった設計方針も変わるでしょう。ここでもルートごとにローディングの仕組みを分離しやすいという点が大きく役立ちます。

まとめ

Reactでのページ遷移は、画面をフルリロードすることなくURLパスの切り替えと画面表示を同時に管理する点が特徴的です。そのため、SPAとしての利便性を最大限に活かせる反面、ルーティングの構成やアニメーションの設計などでやや工数が増えることがあります。

しかし、React Routerのようなルーティングライブラリを導入すれば、ルート定義やパラメータ管理をシンプルにまとめられます。ページ遷移に関する課題が発生したときは、アニメーションやローディング演出、404ページへの振り分けなど、段階的に工夫していくのがよいでしょう。

Reactのページ遷移をしっかりマスターしておくと、大規模なアプリでもユーザーがストレスなく操作できる仕組みを作りやすくなります。初心者の方は、まずは簡単なサンプルアプリから取り組んで、URLと画面内容がどのように紐づくかを実感してみてください。