リモートワークを便利にするWebアプリRee⑧~react-router v4とReduxを組み合わせる~

前回に続きルーターを追加してみます。

使うものはReact Routerです。また、以前の記事でRedux(Ducks)の構成で組んでいるので、そこに追加してみます。

 

インストール

yarnを使ってインストールします。

また、react-router-reduxも入れますが、正式リリースはまだのようなので@nextをつけます。

 

記述

ルートとなるjsファイルに追記します。

store.jsにも追記をします。

ざっくりとですが、このような設定に当たる部分を書きます。

 

メニュー

メニューにあたる部分は以下のように書きます。pathがURLでcomponentで表示させるコンポーネントを選択します。

最後に

React Router v4の情報はまだまだ少なく手探りなところもありますが、導入自体は簡単にできました。