50.React経路を通過するパラメータジャンプと三つの方法の間の差

1.ルーティングテーブル:パラメータのアドレスバー

<ルートパス= "/リスト/:ID"コンポーネント一覧} = {/>
HTML:<リンクへ= '/リスト/ 2'>ジャンプリストページ</ link>を
Jsと:this.props.history.push( ' /一覧/ 2「);
リストのページを受け取っ:
にconsole.log(this.props.match.params.idは)//すべてのパラメータを渡します

 

2.query方法:パラメータのアドレスバーが表示されていない、リフレッシュアドレスバー、行方不明のパラメータ
HTML:
<= {{パス名へのリンク: '/一覧'、クエリ:{名: 'XLF'}}}>ジャンプリストページ</リンク>
のJS方法:this.props.history.push({パス名: '/リスト'、クエリ:{名: 'サニー'}})
リストを受信したページ:
にconsole.log(this.props.location.query.name) //すべてのパラメータを渡します

 

3.state方法:パラメータのアドレスバーが表示されていない、リフレッシュアドレスバーには、パラメータが失われない
HTML:<=へのリンク{{パス名:「/リスト」、状態:{名:「XLF」}}}> ジャンプリストページ< /リンク>
JS:this.props.history.push({パス名: '/リスト'、状態:{名: 'サニー'}})
ストページ受信
にconsole.log(this.props.location.state.name)/ /すべての渡されたパラメータ

おすすめ

転載: www.cnblogs.com/xlfdqf/p/12098520.html