React Routerとは？

React Routerは、Reactアプリケーションにルーティング機能を追加するためのライブラリです。ルーティングとは、ユーザーが異なるURLにアクセスしたときに、どのコンポーネントを表示するかを決定することです。SPAでは、ページ遷移を行うときに、全体を再読み込みせずに特定の部分だけを更新することができます。

React Routerのインストール

まずは、React Routerをインストールしましょう。以下のコマンドを使って、プロジェクトに追加します。

npm install react-router-dom

基本的な使い方

React Routerを使うために、いくつかの基本的なコンポーネントを知っておく必要があります。

BrowserRouter

アプリ全体を囲むコンポーネントです。これを使うことで、React RouterがURLの管理を行います。

Route

特定のURLに対して、どのコンポーネントを表示するかを指定します。

Link

別のページに遷移するためのリンクを作成します。

サンプルコード

ここで、簡単なサンプルコードを見ていきましょう。以下のコードでは、2つのページ（HomeとAbout）を作成しています。

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const Home = () => <h2>ホームページ</h2>;
const About = () => <h2>アバウトページ</h2>;

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">ホーム</Link></li>
            <li><Link to="/about">アバウト</Link></li>
          </ul>
        </nav>

        <Switch>
          <Route path="/about"><About /></Route>
          <Route path="/"><Home /></Route>
        </Switch>
      </div>
    </Router>
  );
};

export default App;

コードの解説

このコードでは、まずBrowserRouterで全体を囲みます。次に、Linkを使ってナビゲーションメニューを作成し、RouteでURLに応じたコンポーネントを表示しています。