React Router で履歴リダイレクトを使用する方法

react-routerでは、コンポーネント内のジャンプは<Link>で使用できます。

しかし、コンポーネントの外にジャンプするには、Reactルーティング履歴を使用する必要があります。

replace メソッドは push メソッドと同じように使用します。 replace の機能は、現在の履歴レコードを置き換えることです。
go、このメソッドは前方または後方に移動するために使用されます、history.go(-1);
goBack、このメソッドは戻るために使用されます、history.goBack();
goForward、このメソッドは前進するために使用されます、history.goForward();

1.フック

'react-router-dom' から {useHistory} をインポートします。
関数 goPage(e) {
 履歴.push({
 パス名: "/home",
 状態: {id: 1}
 });
}

パス名はルーティングアドレスであり、状態はパラメータとして渡すことができる。

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

'react-router-dom' から {useLocation} をインポートします。
関数getParams(){
location = useLocation(); を使用します。
id = location.state.id とします。
}

2. クラスコンポーネント

'react' から React をインポートします。
「history」から {createBrowserHistory} をインポートします。
 
クラスAppはReact.Componentを拡張します。
  コンストラクタ(props) {
      スーパー(小道具);
    }
   ページに移動（）{
 履歴 = createBrowserHistory() を作成します。
 履歴.push({
 パス名: "/home",
 状態: {id: 1}
 });
    履歴.go();
 }
  レンダリング() {nullを返す;}
 
}

history.go が呼び出されない場合、ルートは変わりますが、ページはジャンプしません。

React Router で履歴ジャンプを使用する方法についての記事はこれで終わりです。React Router の履歴ジャンプに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。