react-routerのページ遷移をhandleで行う時にはwithRouterを使う

概要

• react-routerでページ遷移の基本はLinkだが、onClickなどのhandleでは使えない
• handleで呼び出すには、withRouter(XxxYyyy)とthis.props.history.push(/zzzz)を使う。

環境

• "react-router-dom": "^4.2.2"
• "react": "^16.0.0"

方法

事前準備

普通通りrouteを設定する。

App.jsx

import {BrowserRouter, Switch, Route} from 'react-router-dom';

class App extends React.Component {
  render() {
    return (
        <BrowserRouter>
          <div>
            <Switch>
              <Route exact path={'/'} component={Home}/>
              <Route path={'/about'} component={About}/>
            </Switch>
          </div>
        </BrowserRouter>
    )
  }
}

export default App

handleで呼び出す手順

1. export時withRouterで囲む。（propsにhistoryオブジェクトが渡される）
2. historyオブジェクトのpushメソッドを引数にurlを渡して実行する

実際に、Homeページ（/）からabout（/about）ページへ遷移する例を示す。Buttonを押せば/aboutページにスムーズに遷移できることが確認できるはず。

Home.jsx

import { withRouter } from 'react-router';

class Home extends React.Component {
  handleToAboutPage = () => {
    this.props.history.push('/about')
  }

  render() {
    return (
      <div>
        <Button onClick={this.handleToAboutPage}>
          aboutページへ遷移する
        </Button>
      </div>
    )
  }
}

export default withRouter(Home)

なお、reduxを使っている場合も簡単。connectも含めてwithRouterで囲むだけ。export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Home))

これだけで、propsにhistoryオブジェクトが渡されるので、あと上記と同じようにthis.props.history.push('/about')でページ遷移出来る。

Home.jsx

import { withRouter } from 'react-router';

class Home extends React.Component {
  handleToAboutPage = () => {
    this.props.history.push('/about')
  }

  render() {
    return (
      <div>
        <Button onClick={this.handleToAboutPage}>
          aboutページへ遷移する
        </Button>
      </div>
    )
  }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Home))

参考

• https://qiita.com/hoture/items/b4ca1773580317e7112e
• http://blog.hokuma.net/frontend/how_to_navigate_in_react_router/