Reactでページコンポーネントジャンプを実装する方法

Jump メソッド: 1. Link タグ、構文 "" を使用します; 2. Push()、構文 "push(" を使用しますto Jump 転送アドレス ")"; 3.history()、構文 "this.props.history.goBack();" などを使用します。

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

React のいくつかのページ (コンポーネント) ジャンプ メソッド

1.react-router-dom のリンクを使用してページ ジャンプを実現します

一般的に適用可能ボタンやその他のコンポーネントをクリックしてページにジャンプします。具体的な使用法は次のとおりです:

<Link
    to={{
        pathname: &#39;/path/newpath&#39;,
        state: {  // 页面跳转要传递的数据，如下
              data1: {}，
              data2: []
        },
    }}
>
   <Button>
        点击跳转
   </Button>
</Link></p>
<p><strong>2. 反応ルーター Redux のプッシュを使用してページにジャンプします</strong></p> <p>react-router-redux には、通常 redux と組み合わせて使用​​される次の関数が含まれています。 </p>
<ul>
<li>push - 指定されたパスにジャンプします。 </li>
<li>replace - 履歴レコードを置き換えます。現在の位置</li>
<li>go - 履歴内で相対的な位置数を前後に移動します。</li>
<li>goForward - 位置を 1 つ前に移動します。 go(1)</li>
<li>goBack と同等 - 1 つ前の位置に移動します。 go(-1)</li>
</ul>
<p>と同等。特に使用する場合、dispatch:</p>
<pre class="brush:php;toolbar:false">let param1 = {}
dispatch(push("/path/newpath'", param1));
dispatch(replace("/path/newpath'", param1));

3 を送信することでページジャンプが実行されます。RouteComponentProps の履歴を使用してページのロールバックを実行します

通常、特定の操作を完了し、前のページに戻る必要がある場合に使用されます。

this.props.history.goBack();

4. 新しいタブ ページを開き、パスをインターセプトします

最初にルートを次のように定義します:

path: "/pathname/:param1/:param2/:param3",

イベントをクリックして、新しいページ 新しいタブを開きます:

window.open(`pathname/${param1}/${param2}/${param3}`)

新しいページのパスのパラメータを取得します:

param1:  this.props.match.params.param1, 
param2:  this.props.match.params.param2, 
param3:  this.props.match.params.param3,

パス パラメータを取得します:

path?key1=value1&key2=value2

const query = this.props.match.location.search 
const arr = query.split('&')  // ['?key1=value1', '&key2=value2']
const successCount = arr[0].substr(6) // 'value1'
const failedCount = arr[1].substr(6) // 'value2'

または

function GetUrlParam(url, paramName) {
　　var arr = url.split("?");

　　if (arr.length > 1) {
　　　　var paramArr= arr[1].split("&");
　　　　var arr;
　　　　for (var i = 0; i < paramArr.length; i++) {
　　　　　　arr = paramArr[i].split("=");

　　　　　　if (arr != null && arr[0] == paramName) {
　　　　　　　　return arr[1];
　　　　　　}
　　　　}
　　　　return "";
　　}else {
　　　　return "";
　　}　
}

推奨される調査: 「react ビデオ チュートリアル 」

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