Wie in der Antwort von @ msoliman angegeben , withRoutergibt es auch Zugriff auf matchund location. Es wäre schön, wenn die akzeptierte Antwort dies erwähnen würde, da die Weiterleitung des Benutzers nicht der einzige Anwendungsfall für ist withRouter. Dies ist ansonsten eine nette Selbst-Qna.
Michael Yaworski
Wenn Sie den <Link> und <NavLink> vom Router benötigen, müssen Sie den withRouter-HOC verwenden.
Thewebjackal
Ich denke, die Antwort wäre vollständiger, wenn erwähnt würde, warum historyoder matchnicht standardmäßig vorhanden sind. dh warum withRoutersollte ausdrücklich erwähnt werden?
Emran BatmanGhelich
43
withRouterist eine Komponente höherer Ordnung , die bei jedem Rendern die nächstgelegenen Routen match, aktuellen locationund historyRequisiten an die umschlossene Komponente weiterleitet. Es verbindet einfach die Komponente mit dem Router.
Nicht alle Komponenten, insbesondere die gemeinsam genutzten Komponenten, haben Zugriff auf die Requisiten eines solchen Routers. Innerhalb der verpackten Komponenten können Sie auf locationRequisiten zugreifen und weitere Informationen erhalten location.pathnameoder den Benutzer mithilfe einer anderen URL umleiten this.props.history.push.
Hier ist ein vollständiges Beispiel von ihrer Github-Seite:
importReactfrom"react";importPropTypesfrom"prop-types";import{ withRouter }from"react-router";// A simple component that shows the pathname of the current locationclassShowTheLocation extends React.Component{static propTypes ={
match:PropTypes.object.isRequired,
location:PropTypes.object.isRequired,
history:PropTypes.object.isRequired
};
render(){const{ match, location, history }=this.props;return<div>You are now at {location.pathname}</div>;}}// Create a new component that is "connected" (to borrow redux// terminology) to the router.constShowTheLocationWithRouter= withRouter(ShowTheLocation);
withRouterMit einer Komponente höherer Ordnung können Sie auf historydie Eigenschaften des Objekts und die <Route>Übereinstimmung der nächsten zugreifen . withRoutervergehen aktualisiert match, locationund historyRequisiten , um die eingewickelt Komponente , wenn es macht.
importReactfrom"react";importPropTypesfrom"prop-types";import{ withRouter }from"react-router";// A simple component that shows the pathname of the current locationclassShowTheLocation extends React.Component{static propTypes ={
match:PropTypes.object.isRequired,
location:PropTypes.object.isRequired,
history:PropTypes.object.isRequired
};
render(){const{ match, location, history }=this.props;return<div>You are now at {location.pathname}</div>;}}// Create a new component that is "connected" (to borrow redux// terminology) to the router.constShowTheLocationWithRouter= withRouter(ShowTheLocation);
withRouter ist eine Komponente höherer Ordnung, die die nächstgelegenen Routen passiert, um Zugriff auf eine Eigenschaft hinsichtlich des Standorts und der Übereinstimmung von den Requisiten zu erhalten. Auf sie kann nur zugegriffen werden, wenn der Komponente die in der Komponente befindliche Eigenschaft zugewiesen wird
<Route to="/app" component={helo} history ={history}/>
und ebenso die Übereinstimmung und der Wohlstand des Standorts, um den Standort ändern zu können und this.props.history.push zu verwenden. Es sollte für jede Komponenteneigenschaft bereitgestellt werden, die bereitgestellt werden muss. Bei Verwendung von WithRouter kann jedoch auf Standort und Übereinstimmung zugegriffen werden, ohne dass der Eigenschaftsverlauf hinzugefügt wird Auf die Richtung kann zugegriffen werden, ohne dass für jede Route ein Eigenschaftsverlauf hinzugefügt werden muss.
withRouter
gibt es auch Zugriff aufmatch
undlocation
. Es wäre schön, wenn die akzeptierte Antwort dies erwähnen würde, da die Weiterleitung des Benutzers nicht der einzige Anwendungsfall für istwithRouter
. Dies ist ansonsten eine nette Selbst-Qna.history
odermatch
nicht standardmäßig vorhanden sind. dh warumwithRouter
sollte ausdrücklich erwähnt werden?withRouter
ist eine Komponente höherer Ordnung , die bei jedem Rendern die nächstgelegenen Routenmatch
, aktuellenlocation
undhistory
Requisiten an die umschlossene Komponente weiterleitet. Es verbindet einfach die Komponente mit dem Router.Nicht alle Komponenten, insbesondere die gemeinsam genutzten Komponenten, haben Zugriff auf die Requisiten eines solchen Routers. Innerhalb der verpackten Komponenten können Sie auf
location
Requisiten zugreifen und weitere Informationen erhaltenlocation.pathname
oder den Benutzer mithilfe einer anderen URL umleitenthis.props.history.push
.Hier ist ein vollständiges Beispiel von ihrer Github-Seite:
Weitere Informationen finden Sie hier .
quelle
withRouter
Mit einer Komponente höherer Ordnung können Sie aufhistory
die Eigenschaften des Objekts und die<Route>
Übereinstimmung der nächsten zugreifen .withRouter
vergehen aktualisiertmatch
,location
undhistory
Requisiten , um die eingewickelt Komponente , wenn es macht.quelle
withRouter ist eine Komponente höherer Ordnung, die die nächstgelegenen Routen passiert, um Zugriff auf eine Eigenschaft hinsichtlich des Standorts und der Übereinstimmung von den Requisiten zu erhalten. Auf sie kann nur zugegriffen werden, wenn der Komponente die in der Komponente befindliche Eigenschaft zugewiesen wird
und ebenso die Übereinstimmung und der Wohlstand des Standorts, um den Standort ändern zu können und this.props.history.push zu verwenden. Es sollte für jede Komponenteneigenschaft bereitgestellt werden, die bereitgestellt werden muss. Bei Verwendung von WithRouter kann jedoch auf Standort und Übereinstimmung zugegriffen werden, ohne dass der Eigenschaftsverlauf hinzugefügt wird Auf die Richtung kann zugegriffen werden, ohne dass für jede Route ein Eigenschaftsverlauf hinzugefügt werden muss.
quelle