昨日の記事に引き続き、React-Router でのページ遷移について。
今回は、遷移先ページにデータを渡す方法です。
パスからパラメータを取得する方法もありますが、個人的にはこちらの方が好きですね。
早速、値の渡し方ですが、history.push() を下記のように指定します。
this.props.history.push({ pathname: '[遷移先パス]', state: { [変数名]: [値] }});
history.push() の引数には、遷移先パスのみを指定することが多いと思いますが、上記のように連想配列で pathname と state をそれぞれ指定することで、遷移先にデータを渡すことができます。
なお、渡したデータについては、遷移先で下記のように指定すると、値を取得することができます。
this.props.location.state.[変数名];
渡す値は多次元配列でも問題ないので、限度はあるかと思いますが、かなりのデータを渡すことができます。
渡したい値が1つだけだった場合は、パスのパラメータで渡すのもありだと思いますが、データ数が多い場合はこちらがおすすめです。
個人的に、指定方法もこちらの方が好みですね。
以上、React-Router で遷移先のページにデータを渡す方法でした。
