Zusammenfassung der React-Routing-Sprungmethoden

Dieses Mal werde ich Ihnen eine Zusammenfassung der ReactRouting-Sprungmethoden und der Vorsichtsmaßnahmen für React-Routensprünge geben. Hier sind praktische Fälle, werfen wir einen Blick darauf.

Vorwort

React-Router wurde in mehreren Versionen veröffentlicht und es gibt nur wenige Möglichkeiten, Routing Navigation zu verwenden Dasselbe, fassen wir es hier zusammen.

React-Router 2.0.0-Version

Die Version 2.0.0 muss browserHistory zum Springen verwenden. Weitere Informationen finden Sie im Code :

import { browserHistory } from 'react-router'
browserHistory.push('/path')

React-Router 2.4.0 oder höher

React-Router 2.4.0 oder höher, Sie können die Mixin-Methode verwenden, um Fügen Sie dies zur Komponente hinzu.routerAttribut, und führen Sie dann die entsprechenden Operationen aus:

import { withRouter } from 'react-router';
clsss ABC extends Component {
}
module.exports = withRouter(ABC);

Komponenten, die mixin verwendet haben, haben das Attribut this.router, und Sie müssen nur this.props.router .push('/path') verwenden, um zur entsprechenden Route zu springen.

React-Router Version 3.0.0 oder höher

Nach Version 3.0.0 ist es nicht mehr erforderlich, die Router-Attribute manuell einzumischen im Zusammenhang mit jedem Bedarf. Schreiben Sie this.props.router.push('/path') in die gesprungene Komponente, um zur entsprechenden Route zu springen.

React-Router 4.0 oder höher

Routing-Sprung

React-Router 4.0 hat das Routing-Attribut verbessert wurde in das Verlaufsattribut geändert, und die Verwendungsmethode ist immer noch ähnlich wie bei 3.0. Verwenden Sie this.props.history.push('/path') , um überall zu springen, wo Sie springen müssen.

Parametererfassung

kann verwendet werden Parameter der aktuellen Route this.props.match.params.xxx

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung der Vue.js-Download-Methode

Wie Node bedient wird. js und verwenden Sie das Dialogfeld ngDialog

Das obige ist der detaillierte Inhalt vonZusammenfassung der React-Routing-Sprungmethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!