Reactでリンクジャンプを使用する方法

藏色散人
リリース: 2023-01-06 10:33:58
オリジナル
2749 人が閲覧しました

react でリンク ジャンプを使用する方法: 1. リンク ジャンプを通じて非表示のパラメーターを運び、「this.props.location.query」を使用して渡されたパラメーター オブジェクトを取得します; 2. リンク ジャンプを通じて明示的なパラメーターを運びます、次に「this.props.match.params.id」を使用してパラメータを取得します。

Reactでリンクジャンプを使用する方法

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

react でリンクジャンプを使用するにはどうすればよいですか?

React のリンク ジャンプ

リンク ジャンプは目に見えないパラメーターを運びます:

<Link to={{
            pathname: &#39;agent-openservice/&#39;,
            query:{
               shop_id:row.shop_id,
               merchant_id:row.merchant_id
            }
         }} />
ログイン後にコピー

渡されたパラメーター オブジェクトは this.props.location.query を通じて取得できます

欠点: ページ更新ルーティングが失われ、パラメーターが失われます

利点: 複数のパラメーターを運ぶことができます

リンク ジャンプは明示的なパラメーターを運びます

<Link to={{pathname: &#39;agent-openservice/&#39; + shopId, }} />
ログイン後にコピー

マウントされたルーティング パス:

<Route path="agent-openservice/:id">
ログイン後にコピー

パラメータは this.props.match.params.id から取得できます

利点: ページを更新してもパラメータは失われません

欠点: 渡せるパラメータは 1 つだけです

推奨される学習: 「react ビデオ チュートリアル

以上がReactでリンクジャンプを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート