Reactのルーティングジャンプ方法のまとめ

今回は、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 サイトの他の関連記事に注目してください。

推奨読書:
Vue.jsのダウンロード方法を使用した詳細なケースの説明

ダイアログボックスngDialogを使用したNode.jsの操作方法

🎜🎜

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