React Router でルーティングを管理しよう（初心者向け）

2024-01-30

当サイトでは一部リンクに広告が含まれています

React Routerとは？

React Routerは、Reactアプリケーションでルーティングを管理するための一連のナビゲーションコンポーネントです。
これにより、URLに基づいて異なる画面やデータをユーザーに表示することができます。

React Routerのインストール方法

React Routerを使用するためには、まずライブラリをプロジェクトにインストールする必要があります。
npmを使用する場合、ターミナルで以下のコマンドを実行します。

npm install react-router-dom

React Routerの基本的な使い方

React Routerを使った基本的なルーティングを見てみましょう。以下は、ホームページとユーザーページを切り替える簡単な例です。

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

function Home() {
  return <h2>ホーム</h2>;
}

function User() {
  return <h2>ユーザー</h2>;
}

function AppRouter() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">ホーム</Link>
            </li>
            <li>
              <Link to="/user/">ユーザー</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/user/" component={User} />
      </div>
    </Router>
  );
}

export default AppRouter;

この例では、<BrowserRouter>コンポーネントを使ってルーティングを設定しています。
また、<Link>コンポーネントを使ってリンクを作成し、<Route>コンポーネントで各ページのルートを定義しています。

【具体例】パラメータを使用したルーティング

URLにパラメータを含めて、その値に基づいて表示内容を変えることもできます。以下はその例です。

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

function User({ match }) {
  return <h2>ユーザーID: {match.params.id}</h2>;
}

function AppRouter() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/user/1">ユーザー1</Link>
            </li>
            <li>
              <Link to="/user/2">ユーザー2</Link>
            </li>
          </ul>
        </nav>

        <Route path="/user/:id" component={User} />
      </div>
    </Router>
  );
}

export default AppRouter;

この例では、:idというパラメータをURLに含めています。このパラメータの値は、match.params.idで取得することができます。

【具体例2】React Routerを使った簡単なウェブアプリの作成

React Routerを使って、簡単なウェブアプリを作ってみましょう。
このウェブアプリでは、「ホーム」「記事」「プロフィール」という3つのページを作ります。

プロジェクト作成

まず、Reactアプリケーションを作成します。

npx create-react-app react-router-app
cd react-router-app
npm start

必要なパッケージのインストール

まず、React Routerを使うために、react-router-domパッケージをインストールします。

npm install react-router-dom

App.jsの編集

次に、App.jsを編集してルーティングを設定します。

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

// ページのコンポーネント
import Home from './Home';
import Article from './Article';
import Profile from './Profile';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">ホーム</Link></li>
            <li><Link to="/article">記事</Link></li>
            <li><Link to="/profile">プロフィール</Link></li>
          </ul>
        </nav>

        {/* 各ページへのルート設定 */}
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/article" element={<Article />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;
import React from 'react';
import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom';

// ページのコンポーネント
import Home from './Home';
import Article from './Article';
import Profile from './Profile';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">ホーム</Link></li>
            <li><Link to="/article">記事</Link></li>
            <li><Link to="/profile">プロフィール</Link></li>
          </ul>
        </nav>

        {/* 各ページへのルート設定 */}
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/article" element={<Article />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

ここでは、<BrowserRouter>コンポーネントを使ってルーティングを設定しています。
また、<Link>コンポーネントを使ってリンクを作成し、<Route>コンポーネントで各ページのルートを定義しています。

各ページのコンポーネント作成

最後に、各ページのコンポーネントを作成していきます。

touch src/Home.js
touch src/Article.js
touch src/Profile.js

それぞれ、以下のようにコンポーネントを作成します。

Home.js

import React from 'react';

function Home() {
  return <h2>ホーム</h2>;
}

export default Home;

Article.js

import React from 'react';

function Article() {
  return <h2>記事</h2>;
}

export default Article;

Profile.js

import React from 'react';

function Profile() {
  return <h2>プロフィール</h2>;
}

export default Profile;

これで完成です。
ブラウザでアプリを開き、リンクをクリックしてページが切り替わることを確認しましょう。
（npm start 実行後、通常は http://localhost:3000/ でアクセスできます）

React Routerのメリット

コンポーネントベース: Reactのコンポーネントと同じように、ルーティングもコンポーネントベースで管理できます。
動的ルーティング: ユーザーの操作に応じて動的にルーティングを変更できるため、ユーザーに合わせたページを表示できます。
パラメータとクエリ: URLにパラメータやクエリを含めることができるため、ユーザーの操作に応じて表示内容を変更できます。

React Routerの使いどころ

React Routerは、以下のような場面で活用できます。

ユーザーの操作に応じて表示内容を変更したい場合
URLにパラメータやクエリを含めて、表示内容を変更したい場合
ページ遷移をアニメーションで演出したい場合

上記のような場面で、React Routerを活用することで、ユーザーにとって使いやすいアプリケーションを作ることができます。

React Routerの注意点

同じパスを持つルート

React Routerは、複数の<Route>が同じパスにマッチした場合、すべてのルートをレンダリングします。
このため、あるパスに対して1つだけルートをレンダリングさせたい場合は、<Switch>コンポーネントを使用してください。

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

<Router>
  <Switch>
    <Route path="/user/:id" component={User} />
    <Route path="/" component={Home} />
  </Switch>
</Router>

ルートの順序

React Routerは、<Switch>内のルートを上から順に評価します。

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

<Router>
  <Switch>
    <Route path="/user/:id" component={User} />
    <Route path="/user/new" component={NewUser} />
    <Route path="/" component={Home} />
  </Switch>
</Router>

ここで注意したいのが、上記の例では、/user/newは/user/:idと同じパスを持っています。
このため、/user/newにアクセスした場合、/user/:idのルートが先に評価され、/user/newのルートは評価されません。

このような場合は、/user/newのルートを<Switch>内の一番上に移動させることで、/user/newのルートが先に評価されるようにします。

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

<Router>
  <Switch>
    <Route path="/user/new" component={NewUser} />
    <Route path="/user/:id" component={User} />
    <Route path="/" component={Home} />
  </Switch>
</Router>

こうすることで、/user/newにアクセスした場合、/user/newのルートが先に評価されるようになります。