（最終更新月：2023年6月）
✔この記事で理解できること
「React Routerってどういった機能があるの？」
「React Routerの使い方が知りたい！」
「React Routerを使ったアプリケーション開発の実例を知りたい」
✔当記事で取り上げる内容はこちら
- React Routerの概要と特徴
- React Routerを使ったアプリケーション開発の基本および応用方法
- React Routerを活用した具体的なプロジェクト事例
本記事では、React Routerの基本概念から応用的な使い方まで、実践的な例を交えながら徹底的に解説いたします。
ぜひ最後までお読みいただき、あなたの開発力アップにお役立てください。
筆者プロフィール
【現職】プロダクトマネージャー
【副業】ブログ（月間17万PV）/YouTube/Web・アプリ制作
「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。
【当ブログで紹介しているサイト】
✔人に見せても恥ずかしくないコードを書こう
「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。
- 見るからにきれいなコードの書き方
- コードの分割方法
- 変数や関数の命名規則
エンジニアのスタンダートとすべき基準を一から解説しています。
何回も読むのに値する本なので、ぜひ手にとって読んでみてください。
React Routerの導入
こちらでは、React Routerの導入についてお伝えします。
React Routerを導入することで、シングルページアプリケーションにおけるページ遷移を効率的に制御できるのです。
- プロジェクトの作成
- React Routerのインストール
- 動作確認
以下のサイトは著者の自作しているReactサイト。
react-routerにより、トップページから各ページへのリンクを可能にしています。
プロジェクトの作成
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を使ってみることも重要です。
実際に触ることで、機能の詳細について学べるでしょう。