JavaScript
React
react-router

Reactで画面遷移を router.push() で行う時に、オブジェクトを遷移先のコンポーネントに渡す方法

More than 1 year has passed since last update.

APIドキュメントよく見たら書いてあるんですが、気づくまで1時間くらいかかったので、ここで詰まった人も多かろうと思い共有…。

以下のVersionで確認しました

  • react: 15.4.1
  • react-router: 3.0.0

基本的にプログラマブルに遷移させようとすると

 this.props.router.push('/some/path')

という風に書きますが、オブジェクトも渡したいという場合は、stateというパラメータをくっつけてあげればできます。
具体的には下記のような感じ。

 this.props.router.push({
    pathname: '/some/path',
    state: { somedata: data }
 })

遷移先のコンポーネントでは

this.props.location.state.somedata

で、オブジェクトを使用することができます。
う~ん便利。ていうかこれなかったら相当めんどくさかった…