axiosなどの非同期通信を絡めた開発をしているとどうしても単純な画面遷移のことを忘れそうになってしまいます。
ただ単純に遷移だけするならば this.props.history.push({pathname: ‘/next’)}でいけますが、値をもって遷移だと始めたばかりの方は
？となってしまいがちですよね。基礎中の基礎なのでネットにもたくさん情報がありますが、コードには個人差があるのでどうしても
どれを参考にしたらいいか分からない、長くて知らない文法も書かれているから今の自分には理解し難いなど頭を抱えてしまうことも
多いと思います。自分も辛酸を嘗めてきた身ですので、ここでは可能な限り簡潔に書きまとめて同じ悩みを抱えてる方の助けに
なればいいなと思っています。分かりにくかったらごめんなさい。
とりあえず値をもって遷移させるコードがこちらです。↓
main.js
this.props.history.push({pathname: '/next', state: { name: this.state.name }});
現在の値であるstateを引数にして飛ばしています。これだけで次のページで値nameを扱うことができます。
めっちゃ簡単ですね。明解ですね。じゃあ次のページではどうやって受け取るの？ってなった時はこちら↓
next.js
constructor(props) {
super(props);
this.state = {
name: this.props.location.state.name,
}
}
this.props.location.state.nameとは、タグに格納されたname（値を）意味しています。つまり、前ページでタグで受け取った
値nameをthis.stateのnameキーに値として登録しています。
コンストラクタ内でconsole.log(prop)すると、locationタグの中にしっかりとnameの値が入っており
これで取ってきているのが確認できます。
これでnext.js内のrender(){}内で
と定義すればnameの値を表示させることができます。
ざっくりでしたがどうでしょうか。これがすらすら書けるようになれば初級者も卒業できて次のタスクも見えてくると思います。
