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

react-router-domとは

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

メリット

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

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

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

デメリット

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

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

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import { BrowserRouter, Route, Switch } from 'react-router-dom';

// reducers
import reducers from './reducers'

// container
import Game from './containers/Game'
import NotFound from './containers/NotFound'

const store = createStore(reducers)

ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter >
            <Switch>
                <Route exact path="/game" component={Game} />
                <Route component={ NotFound } />
            </Switch>
        </BrowserRouter>
    </Provider>,
    document.getElementById('root')
);

react-router-reduxとは

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

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

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

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

髙妻智一

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

最新記事 by 髙妻智一 (全て見る)

• Polkadot(Substrate)のアドレスとトランザクションについて - 2023-03-09
• 【無料公開】「Goで始めるBitcoin」3章 Bitcoinノードとの通信　技術書典8 - 2020-03-08
• エンジニアがゼロから技術ブログを書くための方法をまとめました - 2019-05-25