ホームページ > ウェブフロントエンド > jsチュートリアル > React のさまざまなバージョンでのルーティング ジャンプ方法のまとめ

React のさまざまなバージョンでのルーティング ジャンプ方法のまとめ

php中世界最好的语言
リリース: 2018-05-22 11:10:25
オリジナル
1804 人が閲覧しました

今回は、Reactルーティングジャンプメソッドのさまざまなバージョンの概要と、Reactルーティングのさまざまなバージョンの注意事項を紹介します。実際のケースを見てみましょう。

はじめに

React-Routerは複数のバージョンがリリースされており、ルーティングNavigationの使用方法がそれぞれ異なりますので、ここでまとめてみましょう。

React-Router 2.0.0バージョン

2.0.0バージョンはジャンプするためにbrowserHistoryを使用する必要があります。詳細についてはコードを参照してください:

import { browserHistory } from 'react-router'
browserHistory.push('/path')
ログイン後にコピー

React-Router 2.4.0バージョン以降

React - Router バージョン 2.4.0 以降では、mixin メソッドを使用して this.router 属性 をコンポーネントに追加し、対応する操作を実行できます。具体的な mixin コード リファレンスは次のとおりです:

import { withRouter } from 'react-router';
clsss ABC extends Component {
}
module.exports = withRouter(ABC);
ログイン後にコピー
mixin を使用したコンポーネントには this.router 属性があり、 this.props.router.push('/path') を使用するだけで対応するルートにジャンプします。

React-Router バージョン 3.0.0 以降

バージョン 3.0.0 以降では、必要なコンポーネントに this.props.router.push('/ を手動で書き込む必要はありません。ジャンプするパス') を使用して応答ルートにジャンプします。

React-Router バージョン 4.0 以降

Route Jump

React-Router 4.0 ではルーティング属性が変更されており、使用方法はどこでも 3.0 と同様です。ジャンプする必要があります。 this.props.history.push('/path') を使用してジャンプします

this.props.history.push('/path') 就可以进行跳转了

参数的获取

使用this.props.match.params.xxx パラメータを取得します

this.props.match.params.xxx を使用してください現在のルートのパラメーターを取得できます

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:
AngularJS モーダル ボックス テンプレート ngDialog ユースケースの共有


Cookie を使用してログイン状態を維持する手順の詳細な説明

🎜🎜

以上がReact のさまざまなバージョンでのルーティング ジャンプ方法のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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