react-router-domのwithRouter apiを使う場面

こんにちはかみむらです。react-router-domはReactでSPAを作るときに必須のライブラリで、history apiを使ってURLベースのページ遷移を実現するライブラリです。いくつか便利なapiが用意されていますが、今回はwithRouterについての説明です。

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで

ドキュメント
github.com

withRouterのコードリーディングしたい場合
github.com

使う場面

Routeで指定したコンポーネントの子要素でhistory apiを使用したいときに使う。

まずはよくあるreact-router-domである基本的な実装。Appをインポートして、Routeでコンポーネントを指定します。

import { Switch, Route } from 'react-router-dom';
import App from './App';

const Root = () => (
  <div>
    <Switch>
      <Route exact path="/" component={App}/>
    </Switch>
  </div>
);

export default Root;

これがApp.jsの内容です。ここではprops.history.pushを使用することができます。App.jsではAppChildという子コンポーネントをインポートしています。

import React from 'react';
import AppChild from './AppChild';

const App = (props) => {
  const handleSubmit = () => {
    props.history.push('/about');
  }
  return (
    <div>
      <button onClick={handleSubmit}></button>
      <AppChild />
    </div>
  )
} 

export default App;

子コンポーネントでもhistory.pushを使いたいですが、これだとエラーが出てしまう。これを解決するためにwithRouter apiを使用します。

import React from 'react';

const AppChild = (props) => {
  const handleSubmit = () => {
    props.history.push('/');
  }
  return (
    <div>
      <button onClick={handleSubmit}>Jump</button>
    </div>
  )
} 

export default AppChild;

使い方

high order componentで書かれているので、withRouterでwrapしてあげると、機能を継承できます。

import React from 'react';
import { withRouter } from 'react-router-dom';

const AppChild = (props) => {
  const handleSubmit = () => {
    props.history.push('/');
  }
  return (
    <div>
      <button onClick={handleSubmit}>Jump</button>
    </div>
  )
} 

export default withRouter(AppChild);

これで子コンポーネントでhistory apiを使えるようになります。