浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React-Router】history.pushで遷移先のページにデータを渡す方法

昨日の記事に引き続き、React-Router でのページ遷移について。
今回は、遷移先ページにデータを渡す方法です。
パスからパラメータを取得する方法もありますが、個人的にはこちらの方が好きですね。

 

早速、値の渡し方ですが、history.push() を下記のように指定します。

this.props.history.push({ pathname: '[遷移先パス]', state: { [変数名]: [値] }});

history.push() の引数には、遷移先パスのみを指定することが多いと思いますが、上記のように連想配列で pathnamestate をそれぞれ指定することで、遷移先にデータを渡すことができます。

なお、渡したデータについては、遷移先で下記のように指定すると、値を取得することができます。

this.props.location.state.[変数名];

渡す値は多次元配列でも問題ないので、限度はあるかと思いますが、かなりのデータを渡すことができます。
渡したい値が1つだけだった場合は、パスのパラメータで渡すのもありだと思いますが、データ数が多い場合はこちらがおすすめです。
個人的に、指定方法もこちらの方が好みですね。

 

以上、React-Router で遷移先のページにデータを渡す方法でした。

  • この記事いいね! (7)