connected-react-routerでSPAの描画をURLで切り替える

「Reactで開発しているSPAの画面数が多くなってきて管理が大変…」
「ReactでURLルーティングってできないの？」
「ちなみにReduxも併用してる」

ReactとReduxでSPAを開発し始めるとぶち当たる上記の悩みを解決してくれるのが、connected-react-routerというライブラリです。

ということでこんにちは、株式会社Playground Webシステム開発部の稲垣です！

今回はconnected-react-routerを用いて、react-reduxで開発したSPAの描画をURLで切り替える方法を解説します。

そもそもなぜSPAにルーティングが必要なのか？

SPA（Single Page Application）は、描画されるコンポーネントが変わって画面が遷移したように見えてもURLは変わっていません。

なので、ユーザーはブラウザの「戻るボタン」を押しても前の画面に戻れないのですね。

ページ遷移なしで画面がヌルッと切り替わることがSPAのメリットであると同時に、ブラウザの「戻るボタン」を使えないのはユーザービリティを下げかねないですよね。

そこでconnected-react-routerを使って、SPAだけどURLルーティングを実装します。

connected-react-routerでルーティングするメリット

connected-react-routerは、react-routerのルーティング状態をReduxで管理できるようにします。なので、ベースはあくまでreact-routerですね。

2020年3月時点、react-reduxで開発している場合はconnected-react-routerがベストプラクティスかなと思っています。

理由は、pushやreplaceといったActionを使って簡単に画面遷移できるからです。

いずれにせよ、SPAでルーティングを行うメリットはざっくり3つあります。

この3つのポイントについて詳しく解説します。

connected-react-routerでルーティングするとブラウザ依存のボタンを使える

すでに述べたとおり、ブラウザの「戻るボタン」や「進むボタン」で任意の画面に切り替えることができるようになります。

また、更新ボタンが使えることもユーザーのためになりますね。

ルーティングのないSPAの場合、更新ボタンを押すと描画が最初の状態に戻ってしまいます。

例えば「スーパーマリオブラーザーズ」をReactでSPAとして開発したとしましょう。

「ステージ1をクリアした後ページの更新ボタンを押したらまたステージ1の最初から…？！」なんてことが起きたらユーザーはキーボードを叩き割るでしょう。

しかしこれをreact-routerでルーティングしておけば

https://super-mario.com/stage1/
https://super-mario.com/stage2/

のようにURLでステージを分けることができます。

間違って更新ボタンを押しても安心ですね。

connected-react-routerを使うとURLで画面を管理できる

これは開発者側のメリットになります。

大規模なSPAになると、アプリの状態だけで画面描画を全て管理するのは至難の技です。

connected-react-routerを用いてURL毎に画面を作ることで、圧倒的に開発しやすくなります。

Reduxでルーティング状態を管理しているので、「現在どのパスにいるのか」も簡単に確認できます。

connected-react-routerでルーティングすることでSEOに有利に働く

SEOは要するに「どんなコンテンツを含むページなのか検索エンジンのロボットに理解してもらうこと」が大切です。

そして、そのロボット（＝クローラー）はURL単位でページを区別します。

そのため、ルーティングをしていないSPAでは、初期表示画面のコンテンツのみが評価されます。

これでは、コンテンツの一部のみしか認識されておらず、正当な評価を得られません。

そこでconnected-react-routerを使ってルーティングすることで、各URL毎にコンテンツを評価してもらえるようになります。

なので、SEO的観点からもSPAにルーティングは必要なのです。

connected-react-routerでルーティングする方法

それでは本題に入ります。

connected-react-routerでルーティングするためには以下の手順を踏みます。

react-router関連ライブラリのインストール

npmで関連ライブラリをインストールしてやりましょう。

npm install -S react react-dom react-redux redux react-router history connected-react-router

connected-react-routerでルーティング状態をReduxのStoreに紐付ける

index.jsxファイルでは各ライブラリをインポートします。

src/index.jsx

import React from 'react';
import { render }from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';
import createBrowserHistory from 'history/createBrowserHistory';
import createStore from './modules/Store/store';
import App from './App';

const history = createBrowserHistory();
const store = createStore(history);

render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

上記のミソは、createBrowserHistory()メソッドを使ってhistoryオブジェクトを生成して、ReduxのStoreを生成する際にインクルードしている点です。

ちなみに、別ファイルで以下のようにStoreを生成する関数を書いています。

src/modules/Store/Store.js

import {
    createStore as reduxCreateStore,
    combineReducers,
    applyMiddleware
} from 'redux';
import { routerMiddleware, connectRouter } from 'connected-react-router'

export default function createStore(history) {
    return reduxCreateStore(
        combineReucers({
            hoge: YourReducer,
            router: connectRouter(history),
        }),
        applyMiddleware(routerMiddleware(history))
    )
}
    

react-routerでルーティングを記述する

URLに応じたコンテナーコンポーネントを呼び出せるようにルーティングを記述します。

src/App.jsx

import React from 'react';
import {Switch, Route} from 'react-router';
import {Home, Create, Detail} from "./containers/index";

const App = () => {
    return (
        <React.Fragment>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/create" component={Create} />
                <Route path="/detail/:id" component={Detail} />
            </Switch>
        </React.Fragment>
    )
};

<Switch>タグで囲った間に、<Route>タグでpathに対応するcomponentを指定するイメージです。

path=”/detail/:id”のように、:idを可変として扱うこともできます。

以上がconnected-react-routerを用いたルーティングの方法でした。

ReactとReduxでSPAを開発している方は参考にしてみてください。

ABOUT ME

稲垣 貴映

サーバーエンジニア兼Webフロントエンジニア。 新卒で独立系SIerに入社後、金融系システム基盤の構築・運用を3年間経験。 プログラミングを独学していた頃に、CEOの馬谷が開講していたSwiftスクールに通い、2019年9月に入社。 趣味はブラジル音楽の演奏。