React 画面遷移先に値を送る実装方法を解説

どうも。どっことです。今回は、Reactでの画面遷移に関する実装について備忘録を載せたいと思います。

画面遷移先にパラメータを送る

画面間で遷移に伴いパラメータやデータを遷移先に渡したいことは頻繁に発生すると思います。例えばコンテンツの一覧画面からコンテンツをクリックしたときには、どのコンテンツがタップされたかを次の画面に渡してあげる、などですね。複数の画面を持つシステムを実装する上で必要不可欠な処理になるので、ぜひ覚えておきたいところです。

必要な実装は以下の3点です。

• クリックした時の遷移処理(1)
• クリックした時の遷移処理(2)
• ルーティング

それぞれ見ていきましょう。

クリックした時の遷移処理(1)

今回は、クリックしたら /secondpage のページに遷移するようにします。

handleClick(){
  this.props.history.push('/secondpage')
}

クリックした時の遷移処理(2)

実際にリンクをクリックしたら、画面遷移させるメソッドをコールします。

<button onClick={() => this.handleClick()}>画面遷移</button>

ルーティングの実装

ルーティングを実装します。実際に書いたのは以下です。

<route exact={true} path='/secondpage' component={SecondPage} />

ルーティングの実装は上から順番に処理されているみたいなので、ルート/を一番下にしておかないと/secondpageに遷移しても、ルート"/"のページが表示されることに注意が必要です。

簡単ですが、以上です。

参考

• Reactで画面遷移先に値を送る