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

はじめに

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

React.jsに関する他の記事はこちら

【React特集】アプリ開発オススメ記事まとめ！言語・FWの知識から開発・運用まで

ルーティング(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を紹介しました。

ルーティングはどのアプリでも使われている基本的な技術なので、これを機に興味を持った人は自分のアプリケーションにも組み込んでみて下さい。

参考文献・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