Verwendung von withRouter
Die Rolle von withRouter: Es kann dafür sorgen, dass die allgemeine Komponente auch über die API der Routing-Komponente verfügt
Das Folgende ist eine allgemeine Komponente, und die allgemeine Komponente verfügt nicht über eine API für die Routing-Komponente. Wenn Sie also eine allgemeine Komponente wünschen
Die API der Routing-Komponente implementiert das Springen und Übergeben von Parametern, und die definierte Komponente muss in withRouter() eingebunden werden
import React, { Component } from 'react'
// 引入了withRouter之后可以让一般组件的身上也有路由组件的API
import {withRouter} from 'react-router-dom'
class Header extends Component {
back = () => {
this.props.history.goBack()
}
forward =() => {
this.props.history.goForward()
}
go =() => {
this.props.history.go(2)
}
render() {
return (
<div className="page-header">
<h2>Vue Router Demo</h2>
<button onClick= {this.forward}>前进</button>
<button onClick= {this.back}>后退</button>
<button onClick= {this.go}>前进或者是后退</button>
</div>
)
}
}
export default withRouter(Header)
//withRouter的返回值是一个新组件
Der Unterschied zwischen BrowserRouter und HashRouter
1) Die zugrunde liegenden Prinzipien sind unterschiedlich
BrowserRouter verwendet die Verlaufs-API von H5, die nicht mit IE9 und niedriger kompatibel ist
HashRouter verwendet den Hashwert der URL
2) Der Ausdruck von path ist unterschiedlich
Es gibt kein # im Pfad von BrowserRouter, zum Beispiel: localhost:3000/demo/test
Im Pfad von HashRouter steht #, zum Beispiel: localhost:3000/#/demo/test
3) Die Auswirkung des Routings auf den Status nach der Aktualisierung
BrowserRouter hat keine Auswirkung, da der Status im Verlaufsobjekt gespeichert wird
Nachdem der HashRouter aktualisiert wurde, geht der Routing-Statusparameter verloren
4) Anmerkungen: HashRouter kann verwendet werden, um einige Probleme im Zusammenhang mit Pfadfehlern zu lösen