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>
   <button>
        点击跳转
   </button>

2. 反応ルーター Redux のプッシュを使用してページにジャンプします

react-router-redux には、通常 redux と組み合わせて使用​​される次の関数が含まれています。

• push - 指定されたパスにジャンプします。
• replace - 履歴レコードを置き換えます。現在の位置
• go - 履歴内で相対的な位置数を前後に移動します。
• goForward - 位置を 1 つ前に移動します。 go(1)
• goBack と同等 - 1 つ前の位置に移動します。 go(-1)

と同等。特に使用する場合、dispatch:

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 <p> 推奨される調査: 「<a href="https://www.php.cn/course/list/21.html" target="_blank">react ビデオ チュートリアル </a>」</p>

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