React.jsでルーティングを実装するためのreact-routerの紹介

はじめに

この記事ではReact.jsにおけるルーティングの役割実装するためのパッケージであるreact-routerについて紹介します。
この機会にルーティングとその基本的な使い方を学習しましょう。

目次

ルーティング(Routing)とは

ルーティング(Routing)とは、ユーザーからの入力に応じて表示させるページを出し分ける処理を指します。

今までのWebアプリケーションはサーバーサイドでルーティングを行うことが主流でしたが、Ajax(Asynchronous JavaScript and XML)という非同期的にサーバーとの通信ができる技術が普及したことにより、クライアントサイドでルーティングを行うことが増えてきました。

いわゆるSPA(Single Page Application)と呼ばれるものです。

spa-router

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では以下のコンポーネントが使用できます。

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だからこそ可能な、ニーズにあったモダンなアプリ開発の指導とサポートがあります。

CodeShip卒業生のReact作品を見る

勉強目的ごとに用意された6つの学習コース&オリジナルのポートフォリオ開発実戦経験豊富な現役エンジニアキャリアコンサルタントがあなたの「開発スキル修得」と「キャリアプランニング」をサポート。

独学での挫折や未経験からでも、スタートアップベンチャーや日系・外資の大手WEB系企業まで幅広くエンジニアを輩出する教育実績を残しています。

さらに、期間内であれば選択した以外のコースのカリキュラムも無料で受講可能。
頑張った分だけ勉強できる「勉強し放題」はCodeShipだけ。

まずはご自身のプログラミング学習やキャリアプランについて、無料個別相談会にてお気軽にご相談ください。

参考文献・URL

穴井宏幸その他著 React入門|React・Reduxの導入からサーバーサイドレンダリングによるUXの向上まで

REACT TRAINING / REACT ROUTER
https://reacttraining.com/react-router/web/guides/quick-start/installation

react-router@v4を使ってみよう:シンプルなtutorial
https://qiita.com/muijp/items/b4ca1773580317e7112e


おすすめ記事