React Routerの使い方と画面遷移の基本

投稿日 2025年9月15日
著者 HITMARKET
カテゴリーホームページ

Reactを使ってWebアプリケーションを開発する際、「画面遷移」をどう実現するかは重要なポイントです。通常のHTMLとは異なり、Reactはシングルページアプリケーション（SPA）であるため、URLが変わってもページ全体をリロードせずに、特定のコンポーネントだけを切り替えることが求められます。そこで登場するのが「React Router」です。本記事では、React Routerの基本的な使い方と画面遷移の仕組みを初心者向けに解説します。

React Routerとは？

React Routerは、Reactでルーティング（URLに応じたコンポーネントの表示）を行うためのライブラリです。画面ごとに異なるURLを割り当て、ユーザーがリンクをクリックしたときに、特定のコンポーネントを表示する仕組みを提供してくれます。これにより、まるでページが遷移しているかのような体験が、実際のページリロードなしに実現できます。

インストール方法

まずはReact Routerをインストールしましょう。次のコマンドをプロジェクトのルートディレクトリで実行します：

npm install react-router-dom

これはブラウザ向けのReact Router（react-router-dom）を導入するためのコマンドです。

基本的な使い方

React Routerでは主に以下のコンポーネントを使用します：

<BrowserRouter>：ルーティング機能をアプリ全体に提供します。
<Routes>：ルート定義をまとめるためのコンテナ。
<Route>：各ルート（URL）と表示するコンポーネントを定義します。
<Link>：ページ遷移のためのリンク。

以下は基本的なコード例です：

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">ホーム</Link>
        <Link to="/about">アバウト</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

このように、URLが / の場合は <Home /> コンポーネントが、/about の場合は <About /> コンポーネントが表示されます。<Link> コンポーネントを使うことで、画面をリロードせずにスムーズにページを移動できます。

URLパラメータの活用

動的なページ（例：記事詳細など）にはパラメータを使うことも可能です。

<Route path="/user/:id" element={<User />} />

このように書くと、/user/123 のようなURLが User コンポーネントにマッチします。useParams() フックを使えば、idの値を取得できます。

まとめ

React Routerを使えば、URLに応じた画面表示の切り替えが簡単に実現できます。SPAに不可欠なルーティング機能を直感的に扱えるため、Reactアプリの開発効率が大きく向上します。まずは基本的な画面遷移から始めて、URLパラメータやネストされたルートなど、少しずつ応用的な機能も学んでいくと良いでしょう。