react-router-domで、ボタン押下時に画面遷移させる方法【React】

■はじめに

ここでは、ボタン押下時のイベントの中で、色々と処理をしてから画面遷移をしたい！という要望に対する対応方法です。

ログインなどで使用すると思います。

■手順

以下、App.jsのソースコードの全量です。

import React from 'react';

class App extends React.Component{
  render()
  {
    const btnClick = () => {
      this.props.history.push('/url');
    }
    return (
      <div>
        <button onClick={btnClick}>ボタン</button>
      </div>
    );
  }
}

export default App;

以下の処理で画面遷移することができます。

this.props.history.push('/url');

ただ、注意するべきなのは、ボタン押下時の関数です。

「function」をつけた関数だと、「this.props」が「undefind」でエラーが発生します。

以下のようにアロー関数を使用する必要があるので、ご注意ください。（結構ハマりました。。。）

const btnClick = () => {
}