☰

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

tag-icon • tag-icon reactjs react-router react-redux
Reactルーター、プログラムでナビゲートするときにデータを渡しますか? 質問する

異なるパスに移動するには、

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

ナビゲーション時にパラメータ (オブジェクト) を送信する方法はありますか?

他にも考えられる選択肢はありますが、合格objectできるかどうかは疑問です。

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

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

ベストアンサー1

現在の回答は古くなっています。

リアクトルーター6:

フックを使用しますuseNavigate:

const navigate = useNavigate();
navigate('/other-page', { state: { id: 7, color: 'green' } });

次に、フックを介して '/other-page' の状態データにアクセスできますuseLocation。

const {state} = useLocation();
const { id, color } = state; // Read values passed on state

Reactルーター4または5:

history.push を呼び出し、状態を渡すための 2 番目のパラメータとしてオブジェクトを渡します。

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

次に、次の方法で '/other-page' の状態データにアクセスできます。

props.location.state

おすすめ記事