React Routerとは？初心者向けにわかりやすく実務での活用まで解説

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

React Router は、React でアプリケーションを開発するときにルーティング機能を提供してくれるライブラリです。シングルページアプリケーション（SPA）では画面遷移の仕組みがコードで管理されますが、その実装を効率的に進めるために多くの現場で活用されています。

本記事では React Router v6 をベースに、初めて使う方でもわかりやすい解説を行います。実務での利用シーンやコード例なども取り上げながら、シンプルにルーティングができるポイントを見ていきましょう。

React Routerが求められる理由

アプリケーションをReactで作るとき、複数のページを作りたいと考える場面がよくあります。しかし、標準のReact単体ではページ遷移の仕組みが用意されていません。

そこで活用されるのが、React Router です。画面ごとのルート（URLパス）とコンポーネントの紐付けを明示的に定義し、ユーザーが特定のURLにアクセスした際に表示したいコンポーネントを切り替えます。

日常的な実務シーンを考えてみると、ログインページからダッシュボードに移動したり、詳細ページにアクセスしたりといった流れがあります。 React Routerがあれば、このような複数画面を行き来するWebアプリをスムーズに構築できるわけです。

もうひとつの特徴として、SPAの形で開発した場合、ページ全体をリロードすることなくコンポーネントを差し替えるので、ユーザー体験が向上します。それにより、ログイン認証やユーザーダッシュボードなど、複雑な機能を扱う場合でも画面の切り替えがシームレスに行えるのが利点です。

React Router v6の基本構成

React Router v6 では、ルーティング設定をまとめる方法が従来と少し変わっています。大きく2つの書き方がありますが、ここでは最新のコンポーネント構文を使った方法を確認しましょう。

BrowserRouter

シンプルなルーティングを定義するときに使用します。 <BrowserRouter> タグでアプリ全体をラップし、その配下で <Routes> と <Route> を使います。

Routes / Route

ルーティングの定義に用いるコンポーネントです。 <Route path="/example" element={<Example />} /> のように、URLと描画するコンポーネントをセットで指定します。

useNavigate

リンク先へプログラム的に移動したいときに使うReact Hookです。例えばボタンをクリックしたら別ページに遷移するといったケースを実装できます。

Link

HTMLのアンカータグのように、ユーザーがクリックすると特定のURLへ遷移させるためのコンポーネントです。 React Router v6では、同一の <Routes> 内で <Route> がネストできたり、複数のパスを効率的に切り替えたりがしやすくなっています。

また、公式ドキュメントでは新しい書き方として createBrowserRouter や RouterProvider が示されていますが、はじめのうちは <BrowserRouter> と <Routes> を組み合わせる方法が理解しやすいでしょう。

実際のコード例

ここでは、簡単なルーティング設定の例を見ていきます。まずはアプリのエントリーポイントとなる index.js または App.js で <BrowserRouter> を使った例です。このコードを動かすには、react と react-router-dom をインストールしてください。


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

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

export default App;

path="/" にアクセスした場合は <Home /> を表示します。
path="/about" にアクセスした場合は <About /> を表示します。

このように、URLパスと描画コンポーネントを簡潔に定義できます。 Home や About は別ファイルで定義したコンポーネントをインポートしているだけなので、Reactの一般的なコンポーネントの書き方と同じ要領です。

動作イメージと実務での活用

上記の例では、「/」 と 「/about」 の2つのパスが定義されています。実務で考えると、トップページとプロフィールページなどの組み合わせをイメージしてもいいでしょう。

例えば、トップページにユーザー一覧を表示して、そこからクリックしたユーザーの詳細ページへ移動できるようにしたいケースがあります。この場合、React Routerを使えば、ユーザー一覧画面を "/" に、ユーザー詳細画面を "/users/:userId" などに割り当てるとわかりやすいです。

実務のプロジェクトでは、以下のような流れが典型的です。

エントリーポイントで <BrowserRouter> を使ってルーティングの土台を作る。
画面ごとにコンポーネントを分割し、<Routes> の中に <Route> を複数配置する。
画面遷移が必要なリンクやボタンに対し、<Link> や useNavigate でルートを指定する。

こうすることで、ユーザーにとっては通常のWebサイトのように複数ページを行き来しているように見えます。しかし実際には、Reactのコンポーネントが差し替わっているだけなので、ページ全体のリロードがなく、軽快な操作感が得られるわけです。

SPAとして実装しているため、URLごとに別のサーバーリクエストを送る必要がありません。そのため、フロントエンド側での画面切り替えがスムーズになり、ユーザー体験が向上します。

ブラウザ履歴との連携

React Routerはブラウザの履歴APIを活用しています。例えば、ユーザーが「戻る」ボタンを押したときに、該当の画面に戻るのはブラウザが持つ履歴情報を参照しているからです。

実務で考えると、例えばフォーム入力時に戻るボタンを押してしまう場面が想定されます。このとき、React Routerとブラウザ履歴の連携を意識すると、フォームが中断されずにページ遷移できたり、必要に応じてアラートを表示したりといった対応が可能になります。

具体的には、useNavigate() を使ったコードで次のような制御がよく行われます。


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

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

  const handleClick = () => {
    // フォームの送信完了後などに別ページへ遷移
    navigate("/about");
  };

  return (
    <button onClick={handleClick}>Aboutページへ</button>
  );
}

export default Example;

この navigate("/about") では、ブラウザの履歴が正しく更新されます。戻るボタンを押すと、遷移前のページに戻れる仕組みです。

ネストされたルーティング

React Router v6では、ネストしたルート設定が以前よりシンプルに書けるようになっています。例えば、ユーザーに関するページをまとめて扱うケースを考えてみましょう。


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

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

export default App;

<Route path="/users" element={<Users />}> の中にさらに <Route path=":userId" element={<UserDetail />} /> が置かれています。この書き方により、/users へアクセスしたときは Users コンポーネントを表示し、/users/123 のようにユーザーIDがついたURLなら UserDetail コンポーネントを表示できます。

実務で考えると、商品一覧と商品詳細のようなパターンも同様にネスト構造で表現できます。読みやすい構成になるので、保守が楽になる点が魅力です。

リダイレクトと認証関連の扱い

ログインが必要なページへのアクセスを制限したい場合、認証状態を判定してアクセスをコントロールします。 React Routerでは、簡単な方法として「認証済みでなければトップページへリダイレクトする」というような制御を行えます。

例えば、カスタムフックを使ってユーザーの認証状態を確認し、未認証なら特定のページへリダイレクトすることが考えられます。また、<Navigate to="/login" /> を利用することで画面遷移を実現できます。


import React from "react";
import { Navigate } from "react-router-dom";

function PrivateRoute({ isAuthenticated, children }) {
  if (!isAuthenticated) {
    return <Navigate to="/login" />;
  }
  return children;
}

export default PrivateRoute;

この PrivateRoute コンポーネントを <Route> にラップして使うことで、認証が必要なページを簡単に書けるようになります。実務ではログイン周りの機能をSPAで構築することが多いため、こういったリダイレクト処理はよく登場するでしょう。

まとめ

この記事では React Router の概要と、実務に近い形での活用例を解説しました。初心者の方でも、URLパスと表示したいコンポーネントを対応づけるしくみを理解いただけたのではないでしょうか。

React Routerがあれば、複数ページを行き来する動きやログイン機能、ユーザー詳細画面などをまとめて管理できます。画面遷移を自由に制御できる点が大きな特徴であり、アプリケーション開発の要とも言えます。

認証やセキュリティの実装は別途バックエンドとの連携が必要になります。ログイン情報をどのように管理するか、ブラウザのCookieやトークンを扱う仕組みを検討することが大切です。

React Routerに関する詳細は、公式ドキュメントを参照しながら実際にコードを書いてみると理解が深まります。 React の学習と並行してルーティングの仕組みを覚えておくと、より完成度の高いシングルページアプリケーションを作りやすくなるでしょう。

以上が React Router の基本的な概要から、実際のコード例、そして実務でどう活用できるかの流れです。初めは戸惑うかもしれませんが、アプリの画面数が増えてくるほど、その便利さを実感できるはずです。