【保存版】React Routerの基本やその使い方を完全解説

ITC運営

2年前

（最終更新月：2023年6月）

✔この記事で理解できること

「React Routerってどういった機能があるの？」
「React Routerの使い方が知りたい！」
「React Routerを使ったアプリケーション開発の実例を知りたい」

✔当記事で取り上げる内容はこちら

React Routerの概要と特徴
React Routerを使ったアプリケーション開発の基本および応用方法
React Routerを活用した具体的なプロジェクト事例

本記事では、React Routerの基本概念から応用的な使い方まで、実践的な例を交えながら徹底的に解説いたします。

ぜひ最後までお読みいただき、あなたの開発力アップにお役立てください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

React Routerの導入

こちらでは、React Routerの導入についてお伝えします。

React Routerを導入することで、シングルページアプリケーションにおけるページ遷移を効率的に制御できるのです。

プロジェクトの作成
React Routerのインストール
動作確認

以下のサイトは著者の自作しているReactサイト。

react-routerにより、トップページから各ページへのリンクを可能にしています。

Fun Tools

ReactとDjangoで作成したWebアプリです。便利なツールを揃えているので、ぜひ立ち寄ってみてください。作り方はブログで紹介しています！

プロジェクトの作成

Reactの新規プロジェクトを作成するために、Create React Appを用います。

ターミナルで以下のコマンドを実行することで、プロジェクトの作成が可能。

npx create-react-app my-app

ここのmy-appはあなたのアプリケーションの名前を入れてください。

作成したプロジェクトのディレクトリに移動し、サーバーを起動します。

cd my-app
npm start

以上の手順で、新規にReactのプロジェクトが作成されます。

React Routerのインストール

React Routerをプロジェクトに導入しましょう。

React Routerは、Reactでルーティングを実現するためのライブラリ。

以下のコマンドでインストールしてください。

npm install react-router-dom

このコマンドを実行することで、React Routerがプロジェクトにインストールされます。

動作確認

React Routerが正しくインストールされたか確認するために、アプリケーションを起動しましょう。

エラーが出なければ、React Routerの導入は完了です。

npm start

以上で、React Routerの導入についての説明は終了。

基本的なルーティング設定

こちらでは、React Routerを用いた基本的なルーティング設定方法について解説します。

適切なルーティング設定により、ユーザーは求める情報にスムーズにアクセスできます。

ルーティングの設定方法
exact属性の利用

ルーティングの設定方法

React Routerでは、BrowserRouterとRouteコンポーネントを用いてルーティングを設定します。

例えばHomeページとAboutページを設定するには、以下のとおり。

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

const App = () => {
  return (
    <Router>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}

このコードは、”/”と”/about”というパスにアクセスがあったときに、それぞれHomeとAboutのコンポーネントをレンダリングします。

exact属性の利用

しかし上記のコードだと、“/about”にアクセスした時にHomeとAboutの両方がレンダリングされてしまいます。

なぜなら”/about”のパスが、”/”も含んでいるためです。

これを解消するためにはexact属性を利用しましょう。

<Route exact path="/" component={Home} />

exact属性を利用すると、指定したパスと完全に一致したときのみコンポーネントがレンダリングされます。

404 Not Foundページの実装：Switchコンポーネント

404 Not Foundページの実装方法について解説します。

存在しないURLにアクセスされた時に、404ページを表示することは、ユーザー体験を高める上で重要です。

React Routerでは、Switchコンポーネントを使って、該当するパスがない場合に表示するページを設定します。

以下のコードはその一例です。

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

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
}

このコードでは、Switchコンポーネントが最初にマッチしたRouteコンポーネントをレンダリングします。

もし"/"や"/about"以外のパスにアクセスがあった場合、NotFoundコンポーネントが表示されます。

リンクの設定方法

こちらでは、ページ内のリンクを設定する方法について詳しく解説します。

React Router内で、ページ内リンクの作成方法を見ていきましょう。

Linkコンポーネントの利用
NavLinkコンポーネントの利用

Linkコンポーネントの利用

React Routerでは、Linkコンポーネントで、ページ内リンクを使えます。

Linkコンポーネントは、アプリケーション内でのナビゲーションを可能してくれるのです。

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

function Navigation = () => {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
    </nav>
  );
}

Linkコンポーネントを使用して、”Home”と”About”の2つのリンクを作成しています。

“to”プロパティを使って、リンクの行き先を指定してください。

NavLinkコンポーネントの利用

もうひとつのリンク作成方法は、NavLinkコンポーネントを使用すること。

NavLinkはLinkと同様に動作しますが、現在のURLがNavLinkの”to”プロパティと一致する場合、スタイルを追加する機能があります。

import { NavLink } from 'react-router-dom';

function Navigation = () => {
  return (
    <nav>
      <ul>
        <li><NavLink exact to="/" activeClassName="active">Home</NavLink></li>
        <li><NavLink to="/about" activeClassName="active">About</NavLink></li>
      </ul>
    </nav>
  );
}

“activeClassName”プロパティを使用して、現在のURLがリンクと一致する場合に適用するCSSクラスを指定します。

“exact”プロパティを使用して、URLの完全一致を指定しましょう。

動的ルーティング(dynamic routing)の設定

React Routerを使用して、動的なルーティングを設定する方法について詳しく解説します。

動的ルーティングは、アプリケーション内で特定のパラメータに基づいて、異なるページを表示する方法です。

propsを取得する
Postコンポーネントの追加
関連リンクの設定
ルーティング設定 in Posts コンポーネント
useParamsフックでIDを取得
useRouteMatchフックの利用

propsを取得する

React Routerは、ルーティングされたコンポーネントに対して特定のpropsを提供します。

これらには、以下の3つが含まれます。

history
location
match

これらはルーティングに関する情報を提供し、ページ遷移の制御を助けます。

const Post = (props) =>  {
  console.log(props.match.params.id); // URLパラメータを取得
  return <h2>Post Id: {props.match.params.id}</h2>;
}

上記のコードでは、match propを通じてURLパラメータにアクセスしています。

Postコンポーネントの追加

新たなPostコンポーネントを作成しましょう。

このコンポーネントは、各ブログポストを表示する役割を果たします。

function Post({ match }) {
  const { id } = match.params;//パラメータのIDです。

  // 実際のアプリケーションではここでidに基づいてデータを取得します。

  return (
    <div>
      <h2>Post Id: {id}</h2>
      <p>Here is some content for Post {id}</p>
    </div>
  );
}

このコンポーネントでは、URLからidパラメータを取得し、ブログポストの内容を表示します。

ルーティング設定 in Posts コンポーネント

Postsコンポーネントでルーティングを設定する方法も見ていきましょう。

パラメータで値を受け取りたい時は以下のようにします。

<Route Path=”パス:パラメータ” component={コンポーネント} />

例はこちらです。

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

const App = () => {
return (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/post/:id" component={Post} />
      <Route component={NotFound} />
    </Switch>
  </Router>
);
}

この設定では、/posts/:idのパスがURLにマッチすると、<Post />コンポーネントがレンダリングされます。

ここでの:idはURLパラメータを示しており、これは動的な値です。

useParamsフックでIDを取得

useParamsフックは、現在のURLパラメータを取得するために使用します。

例えば特定の投稿へのリンクをクリックしたとき、その投稿のIDを取得できます。

具体的には以下のとおりです。

const { id } = useParams();

上記のコードは、URLパラメータのidを取得します。これは、/posts/:idパスで使用するIDです。

useRouteMatchフックの利用

最後に、useRouteMatchフックについて見ていきましょう。

このフックは、現在のURLが特定のルートとマッチするかどうかを判断するのに役立ちます。

このフックから得られる情報はこちら。

URL
パス
パラメータ

以下が使用例です。

const match = useRouteMatch("/posts/:id");

上記のコードでは、useRouteMatchフックを使用して、現在のURLが/posts/:idパスとマッチするかどうかを判断します。

もしマッチする場合、matchオブジェクトはマッチに関する情報を提供します。

useHistory, useLocationフックの利用

こちらでは、React RouterのフックであるuseHistoryとuseLocationについて解説します。

アプリケーションの現在のルートやナビゲーション履歴にアクセスするのに役立つものです。

useLocationフックの設定
useHistoryフックの設定

useLocationフックの設定

useLocationフックは、現在のルートの場所に関する情報を提供するもの。

これには以下が含まれます。

URL
パス名
クエリパラメータ
ステートオブジェクト

以下のように取得できます。

import { useLocation } from 'react-router-dom';

function CurrentPage() {
  const location = useLocation();

  return (
    <div>
      <h3>現在のページ情報</h3>
      <p>パス名：{location.pathname}</p>
      <p>検索パラメータ：{location.search}</p>
      <p>ハッシュ値：{location.hash}</p>
      <p>ステート：{location.state}</p>
    </div>
  );
}

アプリケーション内のナビゲーションの動作を確認するのに便利です。

useHistoryフックの設定

useHistoryフックは、ブラウザの履歴スタックにアクセスを提供します。

これにより、アプリケーション内の画面遷移をプログラム的に制御できるのです。

const history = useHistory();
// 画面遷移
history.push("/new-path");

ブラウザの履歴オブジェクトにアクセスしています。

history.pushメソッドを使用すると、新しいエントリを履歴スタックにプッシュして、新しいパスに画面遷移をおこえます。

リダイレクトの設定・使い方

リダイレクトとは、あるURLから別のURLへ自動的にユーザーを転送する機能のこと。

認証が必要なページへのアクセス制御や、ページのURLが変更された場合などに役立ちます。

React Routerの<Redirect />コンポーネントを使うことで、リダイレクトが実現可能です。

基本的な使い方は以下のようになります。

import { Redirect } from 'react-router-dom';

function LoginPage({ authenticated }) {
  if (authenticated) {
    return <Redirect to="/dashboard" />;
  }

  // ログインフォームを表示
}

上記の例では、ユーザーが認証済みの場合（authenticatedがtrue）のみ、ダッシュボードページ（/dashboard）にリダイレクトします。

まとめ

React Routerが重要な理由は以下のとおり。

シングルページアプリケーションでも多ページアプリケーションのようなユーザー体験を提供可能
デクララティブスタイルでルーティングを設定でき、コードの見通しが良くなる
フックAPIを提供しており、関数コンポーネントからルーティング関連の情報に簡単にアクセスできる

今後の学習には、公式のReact Routerドキュメンテーションを始め、質の高いチュートリアルやブログ記事を読むことをおすすめします。

自身で小さなプロジェクトを作成し、実際にReact Routerを使ってみることも重要です。

実際に触ることで、機能の詳細について学べるでしょう。