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 = () => {
}

コメントを残す