Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
142
Help us understand the problem. What is going on with this article?
@junara

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

More than 3 years have 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))

参考

142
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
junara
10年間医療の研究していたが、Webサービス作りたくて、エンジニアへ。 Rails, Javascritptのエンジニアとして働きながら、生命科学学会検索サービスを作りました。 https://www.dokode.work
bldt
"Your growth, Improve the world" をビジョンに掲げ、自社事業やシステム開発サービスを提供しています

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
142
Help us understand the problem. What is going on with this article?