Was ist die Verwendung von React WithRouter

react withrouter wird verwendet, um eine Komponente in Route einzubinden und die drei Verlaufs-, Standort- und Übereinstimmungsobjekte von „react-router“ an das props-Objekt zu übergeben. Die Einführungssyntax lautet „import{withRouter}from…“.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Was ist die Verwendung von „react withrouter“? Die Funktion von „withRouter“ besteht darin, dass wir, wenn etwas kein Router ist, uns darauf verlassen müssen, zu einer Seite springen müssen, indem wir beispielsweise auf das Logo der Seite klicken und zur Seite zurückkehren Homepage, dann können wir verwenden withRouter Um .withRouter zu tun, besteht die Funktion darin, eine Komponente in Route einzubinden, und dann werden die drei Objekte Verlauf, Standort und Übereinstimmung von React-Router in das Props-Attribut dieser Komponente eingefügt (My Verständnis kann nach dem Hinzufügen von Navigation beim Schreiben der Programmierung hinzugefügt werden. Wenn Sie Vue nicht möchten, können Sie dies verwenden.$router.push() global)

Übergeben Sie die drei Objekte Verlauf, Standort und Übereinstimmung von React-Router an Das Requisitenobjekt

Standardmäßig muss es geroutet werden. Nur die Komponenten, die dem Rendering entsprechen, verfügen über this.props, Routing-Parameter und können die Funktionssprungmethode verwenden. Führen Sie this.props.history.push('/detail') aus. um zu der Seite zu springen, die der Route entspricht

Allerdings sind nicht alle Komponenten direkt mit der Route verbunden (springen Sie über die Route zu dieser Komponente, können Sie mitRouter Routing-Parameter an übergeben). Diese Komponente können Sie derzeit verwenden. Wenn Sie withRouter nicht verwenden, sind this.props dieser Komponente leer und die Props können nicht ausgeführt werden: Verlauf, Standort, Übereinstimmung und andere Methoden, wie zum Beispiel: funktionaler Sprung this.props.push('/detail')

Die Einrichtung mit Router ist sehr einfach und erfordert nur zwei Schritte: 1 Einführung, 2 Ausführung, wie folgt

import React,{Component} from 'react'
import {Switch,Route,NavLink,Redirect,withRouter} from 'react-router-dom' //引入withRouter
import One from './One'
import NotFound from './NotFound'
class App extends Component{
    //此时才能获取this.props,包含（history, match, location）三个对象
    console.log(this.props);  //输出{match: {…}, location: {…}, history: {…}, 等}
    render(){return (<div className=&#39;app&#39;>
            <NavLink to=&#39;/one/users&#39;>HOME</NavLink>
            <NavLink to=&#39;/one/companies&#39;>OTHER</NavLink>
            <Switch>
                <Route path=&#39;/one/:type?&#39; component={One} />
                <Redirect from=&#39;/&#39; to=&#39;/one&#39; exact />
                <Route component={NotFound} />
            </Switch>
        </div>)
    }
}
export default withRouter(App);  //这里要执行一下WithRouter

empfohlenes Lernen: „

Video-Tutorial reagieren

“

Das obige ist der detaillierte Inhalt vonWas ist die Verwendung von React WithRouter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!