React 入門：React Routerによるページ遷移

React でシングルページアプリ（SPA）を作るとき、複数のページに分けて表示するには React Router がよく使われます。React は基本的に 1 つの HTML しかレンダーしませんが、React Router を使うと、URL の変化に応じてコンポーネントを切り替えられます。

今回は React Router の基本と、ページ遷移の実装方法を紹介します。

1. React Router とは？

  • URL に応じて表示するコンポーネントを切り替えるライブラリ
  • SPA でも「複数ページ」のような体験を提供できる
  • 主なパッケージ：react-router-dom（ブラウザ用）

2. インストール方法

npm install react-router-dom

または

yarn add react-router-dom

3. 基本的な使い方

ステップ 1：Router でアプリを囲む

import { BrowserRouter as Router } from "react-router-dom";

function App() {
  return (
    <Router>
      <h1>マイアプリ</h1>
      {/* ルーティングはここに書く */}
    </Router>
  );
}

BrowserRouter（別名 Router）でアプリ全体を囲むことで、ルーティング機能が使えるようになります。

ステップ 2：Routes と Route を使ってページを定義

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

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}
  • path で URL を指定
  • element に表示するコンポーネントを設定

これで / にアクセスすると Home、/about にアクセスすると About が表示されます。

ステップ 3：リンクでページ遷移

React Router では、<a> タグではなく <Link> コンポーネントを使うのがポイントです。
これによりページ全体がリロードされず、スムーズな遷移が可能です。

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

function Navbar() {
  return (
    <nav>
      <Link to="/">ホーム</Link> | <Link to="/about">会社情報</Link>
    </nav>
  );
}

ステップ 4：動的ルートの作成

パラメータ付き URL も設定できます。

function User({ id }) {
  return <p>ユーザーID: {id}</p>;
}

// ルーティング
<Route path="/user/:id" element={<UserWrapper />} />;

// idを取得
import { useParams } from "react-router-dom";
function UserWrapper() {
  const { id } = useParams();
  return <User id={id} />;
}

/user/123 にアクセスすると、id=123 を取得できます。

ステップ 5：ページ遷移のプログラム制御

useNavigate フックを使うと、ボタンのクリックでページ遷移できます。

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

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

  return <button onClick={() => navigate("/about")}>会社情報へ</button>;
}

まとめ

  • React Router は SPA でのページ遷移 を簡単に実現
  • 基本は BrowserRouter + Routes + Route
  • ページリンクは Link を使う
  • URL パラメータやプログラム遷移もサポート