react-router

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))

参考