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






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



コメントを残す

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