Edited at

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

More than 1 year has passed since last update.


概要


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



参考