web-dev-qa-db-ja.com

Reactルーター、プログラムでナビゲートするときにデータを渡しますか？

を使用して別のパスに移動できます

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

ナビゲートするときにパラメータ（オブジェクト）を送信する方法はありますか？

私が考えることができる他のオプションがありますが、objectを渡すことがまったく可能かどうか疑問に思いますか？

  • オブジェクトのidを埋め込み、新しいページからサーバーからオブジェクトを再取得できます。

  • または、reduxストアなどのグローバルストレージにオブジェクトを保存できます。 （このオブジェクトはすぐにストアから削除する必要があります。そのため、そもそもそこに置くのは良くないかもしれないと考えています）

reactjsreact-routerreact-redux
20
eugene

React Routerはlocationオブジェクトを使用します。 locationオブジェクトのプロパティの1つはstateです。

this.props.router.Push({
  pathname: '/other-page',
  state: {
    id: 7,
    color: 'green'
  }
})

ナビゲート先のページでは、現在のlocationがルートが一致したコンポーネントに挿入されるため、this.props.location.stateを使用して状態にアクセスできます。

ユーザーがページに直接移動する場合、stateがないため、データが存在しない場合でもデータをロードするための何らかのメカニズムが必要です。

56
Paul S

React Router 4または5を使用している場合、現在の回答は古くなっています。history.Pushを呼び出して、状態を渡す2番目のパラメーターとしてオブジェクトを渡します。

props.history.Push('/other-page', { id: 7, color: 'green' }))

次に、「/ other-page」の状態データにアクセスできます：

props.location.state

13
Cory House

react routerでプログラム的にナビゲーションするときにクエリパラメーターを渡す

履歴オブジェクトは、history.Pushとhistory.replaceの両方を使用して、プログラムで現在の場所を変更するために使用できます。

    history.Push('/home?the=query', { some: 'state' })

履歴オブジェクトを小道具としてコンポーネントに渡す場合。その後、履歴オブジェクトで利用可能なリアクションルーターメソッドを使用して、プログラムでナビゲートできます。

ここで、「router」と呼ばれる小道具として履歴オブジェクトを渡すと仮定しましょう。したがって、次のようなクラスベースの構文でコンポーネント内で参照されます。

this.props.router

プッシュまたは置換を使用する場合、URLパスと状態の両方を個別の引数として指定するか、単一の場所のようなオブジェクトにすべてを最初の引数として含めることができます。

this.props.router.Push('/some/path?the=query')

または、単一の場所のようなオブジェクトを使用して、URLと状態の両方を指定できます。これは上記の例と同等です。

this.props.router.Push({
  pathname: '/some/path',  //path
  search: '?the=query' // query param named 'search'
})

注-もちろん、this.props.routerが実際にreact-router apiからの履歴オブジェクトであることを確認してください。

3
therewillbecode

クエリ文字列で送信する場合

this.props.router.Push({
  pathname: '/payment-history',
  query: {
    email: rowData.email
  }
})
0
Ishan

反応ルーターv4 +でこれを機能させることができませんでした。しかし、以下は機能します：

//I.e. add navigate using the history stack and pass context as the 2nd parameter
this.props.history.Push('/takeTest', {
  subjectsList: this.props.subjectsList.filter(f => f.isChecked === true)
})
0
Richard Strickland

使用しているバージョンはわかりませんが、react-routerのパラメーターとしてオブジェクトを指定できます。

let {router} = this.props;
router.Push({pathname: "/newpath", query: {id: 1}) // will create the url /newpath?id=1
0
cubbuk