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

2023.06.06

※本サイトにはプロモーション・広告が含まれています。

（最終更新月：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アプリです。便利なツールを揃えているので、ぜひ立ち寄ってみてください。作り方はブログで紹介しています！
tools.itc-app.site

プロジェクトの作成

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パラメータを取得し、ブログポストの内容を表示します。

関連リンクの設定

関連リンクの設定は、動的なルーティングの一部。

これは、特定の投稿へのリンクを作成する場合に特に便利です。

例えば、ブログ投稿リストから個々の投稿へのリンクを作成することが可能になります。

<Link to={`/posts/${post.id}`}>{post.title}</Link>

上記のコードは、それぞれの投稿に対してリンクを作成します。

リンク先の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を使ってみることも重要です。

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

タイトルとURLをコピーしました