Reactでフロントエンドを実装する際、ルーティングを用いることがあると思います。 この記事では、ルーティングのそもそもの考え方と、Reactでの代表的なライブラリであるreact-routerの使い方についてまとめました。

ルーティングとは

まず、ルーティングとは指定されたURLがどの処理を行なうかを制御する仕組みのことをいいます。

サーバサイドのルーティングについては、代表的なWebアプリケーションフレームワークであれば、その仕組みは標準で搭載されていると思います。

ただ、サーバサイドでのルーティングは、リクエストのたびに画面全体を再レンダリングしてしまいます。 ヘッダやフッタなど多くの共通部分をもつ画面の場合、これは無駄な処理といえます。

フロントエンドにおいて、変更可能性のある領域のみにルーティングを適用することで、最小限のコストでレンダリングでき、ユーザによりよい体験を提供することができます。

そもそも、APIの取得などのデータアクセスがなければ、HTTPリクエストも発生しません。 こういった意味でも、フロントエンドのルーティングを適切に導入することは大切といえます。

ヒストリとは

ルーティングを理解する上で、ヒストリという概念が重要になってきます。

ヒストリとは、簡単にいうと「ブラウザのアドレスバーからのURL変更を検知、またそれを解析してlocationオブジェクトに格納する仕組み」のことをいいます。

ヒストリには、大きく分けると次の2つがあります。

1. ブラウザヒストリ

ブラウザヒストリは、URLの操作や生成に、ブラウザのHistory APIを用います。 これにより生成されたURLはexample.com/users/1のような見慣れたものになります。

ただ、ブラウザヒストリの利用には、サーバ側の対応が必要になります。

簡単な例として、アプリケーションをexample.comに配置する際、example.com/users/1のリクエストをexample.comで処理しなければなりません。

2. ハッシュヒストリ

ハッシュヒストリは、URLに#を挿入し、以降の文字列をもとにルーティングを行ないます。

上記の例ではexample.com/#/users/1となります。 これはexample.comにリクエストが飛ぶため、サーバの設定をしなくても問題なく処理できます。

Reactにおけるルーティング

Reactにおけるルーティングは、(1)ヒストリ情報を解析し、(2)対応するコンポーネントをレンダリングします。

このフローをラップして使いやすくしたものがルーティングライブラリで、Reactにおいてはreact-routerがデファクトスタンダードとなっています。

react-routerの使い方

それでは、react-router(v4.0.0-alpha.3)を用いた設定について見ていきます。 以下はreact-router固有の設定ですが、基本的な考え方はフロントエンドのルーティング全般で共通していると思います。

import { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Match, Link } from 'react-router';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <ul>
            <li><Link to='/'>Home</Link></li>
            <li><Link to='/about'>About</Link></li>
            <li><Link to='/users/1'>User#1</Link></li>
          </ul>
          <Match exactly pattern='/' component={Home} />
          <Match pattern='/about' component={About} />
          <Match pattern='/users/:id' component={User} />
        </div>
      </BrowserRouter>
    );
  }
}

設定に必要な要素は、だいたい次の3つになります。

  1. ヒストリ情報を指定する(BrowserRouter
  2. ルーティング情報を定義する(Match
  3. ページ間を遷移する(Link

遷移は専用のLinkコンポーネントで行なっています。 これは、内部でaタグを生成し、onclickでヒストリに遷移先を追加しています。

参考記事

おわりに

ルーティングの基本的な考えは以上になります。

Ruby on Railsでのサーバサイドレンダリングや、Reduxによるルーティングは後日投稿する予定です。