Heim > Artikel > Web-Frontend > 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.
Ü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='app'> <NavLink to='/one/users'>HOME</NavLink> <NavLink to='/one/companies'>OTHER</NavLink> <Switch> <Route path='/one/:type?' component={One} /> <Redirect from='/' to='/one' 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!