React react-router-dom v5 画面遷移 入門
今回は、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を使うことで、画面遷移が容易に実装することができました。
次回は、ルーティングのネスト・パラメータでのルーティング周りについて学習していきたいと思います。