Reactのルーティングにreact-router-domとreact-router-reduxを導入する方法




どうも高妻です。Twitterでプログラミングのことや暗号通貨のことをつぶやいているのでよかったらフォローしてください。  

react-router-domとは

react-router-domはURLによって表示するコンポーネントを簡単に切り替えてくれるモジュールです。使い方は簡単で下記のようになります。

メリット

BrowserRouterというコンポーネントを親に置いて、Routeコンポーネントのpathごとにコンポーネントを設定するだけで表示を切り替えることができます。

Reactを使わないSPAだとここら辺の処理がめんどくさくなりがちですがreact-router-domを使うと簡単に実現できます。

またSwitchコンポーネントを使って、pathを指定しないRouteを設定することで存在しないページをまとめて管理することもできるのが便利です。

デメリット

react-router-domはURLのパスが変わった時にreduxで管理しているstateを引き継げません。

なのでブラウザバックして、また元のページに戻ってきた時や、入力フォームから確認ページへの繊維でコンポーネントが切り替わる時に値を渡すのが大変になってしまいます。

react-router-reduxとは

reduxはstateを一元管理できるフレームワークですが、react-router-reduxを使うことでstateにURL情報の管理も任せてしまおうというモジュールです。

これを使うとブラウザバックしたり進んだりしてもstateとurlの管理を扱いやすくしてくれます。

ソースコードはちゃんとしたものができ次第追記します。

The following two tabs change content below.

高妻智一

2013年CyberAgent新卒入社 スマホゲームを作る子会社に所属し、サーバーサイドのエンジニアを担当。2年目の終わりから新規子会社の立ち上げに参加し、サーバーサイドのエンジニアリーダーとしてサービースのリリースから運用までを担当。 2018年仮想通貨のスマホウォレットを提供するGinco Incにブロックチェーンエンジニアとして入社。






よく読まれている関連記事はこちら



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です