React react-router-dom v5 画面遷移 入門

2019年11月5日

今回は、react-router-domというライブラリを利用して、Reactでの画面遷移について学習していきたいと思います。

Webページでよくあるヘッダーのメニューをreact-router-domにてページ切り替えを行なっていきます。

実際に手を動かしてみたいという方は、こちらからプロジェクト作成をお願いします。

App.jsなどを編集していきます。

react-routerについて

React開発における画面遷移（ルーティング）を制御してくれるライブラリとなります。
react-router:https://github.com/ReactTraining/react-router

react-router-domについて

react-routerのコアルーティング機能を直接インストールしたくない場合、ブラウザで実行するアプリケーションでは、react-router-domを利用します。
※react-routerは、依存関係としてインストールされます。
react-router-dom:https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom

メニューを作成してみよう

以下のようなHome ・ About ・Users情報を表示するメニューを作成します。

ライブラリインストール

$ yarn add react-router-dom

モジュールのインポート

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom"

各モジュールについて

• BrowserRouter
  HTML5の履歴API（pushState、replaceState、popstateイベント）を使用してUIとURLの同期を維持する
  
• Switch
  ルートを排他的にレンダリングする際に定義する
  ※ルートとパスにマッチしたものだけをレンダリングする場合など
  
• Route
  現在のURLに一致するUIをレンダリングする
  ※パスと表示したいコンポーネントを定義する
  
• Link
  アクセス可能なリンク先を定義する
  

ルーティング部分の作成

表示用関数(App function等)に画面遷移に関する情報を追加する

<Router>
  <div>
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/users">Users</Link>
        </li>
      </ul>
    </nav>
    <Switch>
      <Route path="/about">
        <About />
      </Route>
      <Route path="/users">
        <Users />
      </Route>
      <Route path="/">
        <Home />
      </Route>
    </Switch>
  </div>
</Router>

各ルートで表示する関数を追加

3つのHome・About・Usersの表示関数を追加する

function Home() {
  return <h2>Home</h2>;
}
function About() {
  return <h2>About</h2>;
}
function Users() {
  return <h2>Users</h2>;
}

ビルド

$ yarn start

メニューの切り替えが完成しました

まとめ

react-router-domを使うことで、画面遷移が容易に実装することができました。

次回は、ルーティングのネスト・パラメータでのルーティング周りについて学習していきたいと思います。