「Reactで開発しているSPAの画面数が多くなってきて管理が大変…」
「ReactでURLルーティングってできないの?」
「ちなみにReduxも併用してる」
ReactとReduxでSPAを開発し始めるとぶち当たる上記の悩みを解決してくれるのが、connected-react-routerというライブラリです。
ということでこんにちは、株式会社Playground Webシステム開発部の稲垣です!
今回はconnected-react-routerを用いて、react-reduxで開発したSPAの描画をURLで切り替える方法を解説します。
- なぜconnected-react-routerが必要なのか?
- connected-react-routerを使うメリット
- connected-react-routerの使い方
そもそもなぜ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つあります。
- ユーザーがブラウザの「戻るボタン」「進むボタン」を使える
- URLで画面を管理できる
- SEOに有利
この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とReduxのStoreを接続する
- ルーティングを記述する
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を開発している方は参考にしてみてください。
- SPAでもURLルーティングが使える
- Reactでルーティングするためにはreact-routerが必要
- connected-react-routerでreact-routerのルーティング状態をReduxのStoreで管理と便利
- 無料・簡単・片手でホームページを作成できる自社サービス Rakwi
- Web制作とアプリ開発を学べるオンラインプログラミング講座 Upstairs
- 開発,DX推進支援サービス スタートアッププラン