はじめに
この記事ではReact.jsにおけるルーティングの役割と実装するためのパッケージであるreact-routerについて紹介します。
この機会にルーティングとその基本的な使い方を学習しましょう。
目次
ルーティング(Routing)とは
ルーティング(Routing)とは、ユーザーからの入力に応じて表示させるページを出し分ける処理を指します。
今までのWebアプリケーションはサーバーサイドでルーティングを行うことが主流でしたが、Ajax(Asynchronous JavaScript and XML)という非同期的にサーバーとの通信ができる技術が普及したことにより、クライアントサイドでルーティングを行うことが増えてきました。
いわゆるSPA(Single Page Application)と呼ばれるものです。

SPAはSingle Pageと呼ばれているように、1枚のHTMLファイルをレンダリングしてブラウザに表示しています。
SPAではページ内でDOMを色々変更したとしてもURLは変わりません。
ルーティングによりURLで画面を指定する(DOMの状態を保存する)ことができます。
これにより、ページ遷移や共有がスムーズに行えるようになります。
このような理由からSPAであってもルーティングを使っているアプリケーションが多いです。
react-routerを使用したルーティング
ここでは数あるルーティングライブラリの中から、React.jsでは一番メジャーだと思われるreact-routerを紹介します。
react-router
https://github.com/ReactTraining/react-router
Web開発専用のreact-router-domをインストールするだけでReactアプリケーションでの使用が可能です。
npm install react-router-dom
react-routerでは以下のコンポーネントが使用できます。

これらのコンポーネントを使用して簡単に様々な機能を実装できます。
それでは具体的にどのように使うのか見てみましょう。
react-routerの一部機能の紹介
react-routerではどういうことができるのか、機能の一部を紹介します。
<BrowserRouter />
アプリケーションにrouterを導入するためのコンポーネントです。
Reactアプリケーションで使用するためには、router直下に使用したいアプリケーションのコンポーネントを配置します。
import React, { Component } from "react";
import { BrowserRouter } from "react-router-dom";
// routerを使用したいコンポーネントのパス
import Blog from "./path/to/blog-component";
class App extends Component {
render() {
return (
// router直下に使用したいアプリケーションのコンポーネントを配置する
<BrowserRouter>
<Blog />
</BrowserRouter>
);
}
}
export default App;
こうすることで<BrowserRouter>直下の<Blog />でrouterを使用できます。
routerのコンポーネントは他にも<HashRouter />があります。
これはURL Hashというhttp://example.com/#/your/page
のように#を使用したURLでサーバーへのリクエストを行わないものを利用したルーティングに使用できます。
<Route />
<Route />はおそらく一番使用頻度の高いコンポーネントです。
URLを指定して表示させる画面やコンポーネントを切り替える際に使用します。
<Route exact path="/" component={App} />
<Route path="/posts" component={Posts} />
<Route exact path="/new-post" component={NewPost} />
<Route render={() => <h1>Home</h1>} />
URLがpathで指定した文字列を含む場合に、componentで指定したコンポーネントかrenderで指定した内容を描写します。
もしURLが文字列を含む場合ではなく、完全一致した場合に描写したい場合はexact
をつけます。
大体exact
を使用することになると思いますが、常に共通のAPIを叩きたい場合やあるページで常に情報を表示させたい場合は、exact
を指定しないで使用します。
<Switch />
<Switch />は<Route />を並べている時に以下のように使用します。
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/posts" component={Posts} />
<Route exact path="/new-post" component={NewPost} />
<Route exact component={NotFound} />
</Switch>
JavaScriptのswitch構文と同様に<Route />のURLにマッチしたものを描写できるようになります。
switch構文では何にも当てはまらない場合にdefaultで定義しますが、<Switch />でも同様のことができます。
pathを指定しない<Route />を作ることで上記に指定したどのpathにもない場合に、レンダリングするコンポーネントを指定できます。
<Link />
<Link />でシングルページアプリケーション内の遷移を用意できます。
<Link
to={{
pathname: "/new-post",
hash: "#submit"
}}
>
New Post
</Link>
pathnameで指定したpathへ遷移できます。
他にもURLにhashを指定できます。
HTML内にid指定をして、ページ内の特定の位置に画面遷移したいときは使うと良いでしょう。
<NavLink />
<NavLink />は<Link />と機能は似ていますが、<Link />にURLに応じた装飾をつけることができます。
<NavLink
to="/posts"
exact
activeClassName="my-active"
activeStyle={{
color: "#fa923f",
textDecoration: "underline"
}}
>
Home
</NavLink>
toで指定したURLと現在のURLが一致している時にacticeClassNameのクラス名やactiveStyleのCSSスタイルを適用できます。
ここでは紹介しきれなかった機能
ここで紹介した機能はほんの一部です。
他にも様々な機能があるので、興味がある方は以下の記事を参考にしてみてください。
react-router@v4を使ってみよう:シンプルなtutorial
https://qiita.com/muijp/items/b4ca1773580317e7112e
まとめ
今回はReact.jsにおけるルーティングと実装するためのパッケージであるreact-routerを紹介しました。
ルーティングはどのアプリでも使われている基本的な技術なので、これを機に興味を持った人は自分のアプリケーションにも組み込んでみて下さい。
React.jsに関する他の記事を見る↓↓
Reactでのアプリ開発を学ぶなら

CodeShipでは、現状プログラミングスクールでも取り扱いの少ない「React.js」でのアプリ開発を修得する学習カリキュラムを設置。
どこよりも早く目をつけ長らく指導実績を積んできたCodeShipだからこそ可能な、ニーズにあったモダンなアプリ開発の指導とサポートがあります。
勉強目的ごとに用意された6つの学習コース&オリジナルのポートフォリオ開発と実戦経験豊富な現役エンジニア、キャリアコンサルタントがあなたの「開発スキル修得」と「キャリアプランニング」をサポート。
独学での挫折や未経験からでも、スタートアップベンチャーや日系・外資の大手WEB系企業まで幅広くエンジニアを輩出する教育実績を残しています。
さらに、期間内であれば選択した以外のコースのカリキュラムも無料で受講可能。
頑張った分だけ勉強できる「勉強し放題」はCodeShipだけ。
まずはご自身のプログラミング学習やキャリアプランについて、無料個別相談会にてお気軽にご相談ください。
参考文献・URL
穴井宏幸その他著 React入門|React・Reduxの導入からサーバーサイドレンダリングによるUXの向上まで
REACT TRAINING / REACT ROUTER
https://reacttraining.com/react-router/web/guides/quick-start/installationreact-router@v4を使ってみよう:シンプルなtutorial
https://qiita.com/muijp/items/b4ca1773580317e7112e