Linkにonclickコールバックを持たせる

2021-04-02 React, JavaScript

linkタグで他ページに遷移する時には一般的にはtoプロパティを使いますが

何かの機能を追加したい場合はどうしても関数をかませたくなります。

linkではtoしか移動手段が無いイメージですが、onClickでもちゃんと遷移して

くれます。

<Link to={"/about/" + id}><Link>

これと同じ動きをonClickですると以下のようになります。

//関数
idSet(){
this.props.history.push({ pathname: '/about/' + id});
}
//JSX
<Link onClick={() => {this.idSet(id)}}></Link>

普通のボタンと同じ要領で実装することでonClickコールバックが動いてくれます。