Ich bin neu bei ReactJS und bei React-Router. Ich habe eine Komponente, die über Requisiten ein <Link/>
Objekt vom React-Router empfängt . Immer wenn der Benutzer auf eine Schaltfläche "Weiter" in dieser Komponente klickt, möchte ich das <Link/>
Objekt manuell aufrufen .
Im Moment verwende ich refs, um auf die Sicherungsinstanz zuzugreifen und manuell auf das <Link/>
generierte 'a'-Tag zu klicken .
Frage: Gibt es eine Möglichkeit, den Link manuell aufzurufen (z. B. this.props.next.go
)?
Dies ist der aktuelle Code, den ich habe:
//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
<Document next={sampleLink} />
//in Document.js
...
var Document = React.createClass({
_onClickNext: function() {
var next = this.refs.next.getDOMNode();
next.querySelectorAll('a').item(0).click(); //this sounds like hack to me
},
render: function() {
return (
...
<div ref="next">{this.props.next} <img src="rightArrow.png" onClick={this._onClickNext}/></div>
...
);
}
});
...
Dies ist der Code, den ich haben möchte:
//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
<Document next={sampleLink} />
//in Document.js
...
var Document = React.createClass({
render: function() {
return (
...
<div onClick={this.props.next.go}>{this.props.next.label} <img src="rightArrow.png" /> </div>
...
);
}
});
...
quelle
React Router 4 enthält ein withRouter- HOC , mit dem Sie
history
über Folgendes auf das Objekt zugreifen könnenthis.props
:quelle
In der Version 5.x können Sie den folgenden
useHistory
Hook verwendenreact-router-dom
:quelle
if ((routerHistory.location.pathname + routerHistory.location.search) !== navigateToPath) { routerHistory.push(navigateToPath); }
history
Variable deklarieren , das Aufrufen von VerzeichnissenuseHistory().push
ist nach den Hooks-Regeln nicht zulässighttps://github.com/rackt/react-router/blob/bf89168acb30b6dc9b0244360bcbac5081cf6b38/examples/transitions/app.js#L50
oder Sie können sogar versuchen, onClick this auszuführen (gewalttätigere Lösung):
quelle
assign
ist keine Eigenschaft, es ist eine Funktion.Ok, ich glaube, ich konnte eine richtige Lösung dafür finden.
Anstatt
<Link/>
als Requisite an Document zu senden, sende ich jetzt<NextLink/>
einen benutzerdefinierten Wrapper für den React-Router-Link. Auf diese Weise kann ich den Rechtspfeil als Teil der Link-Struktur verwenden, ohne dass Routing-Code im Document-Objekt enthalten ist.Der aktualisierte Code sieht folgendermaßen aus:
PS : Wenn Sie die neueste Version des React-Routers verwenden, müssen Sie möglicherweise
this.context.router.transitionTo
stattdessen verwendenthis.context.transitionTo
. Dieser Code funktioniert gut für React-Router Version 0.12.X.quelle
Router reagieren 4
Sie können die Push-Methode einfach über den Kontext in Version 4 aufrufen:
this.context.router.push(this.props.exitPath);
wo Kontext ist:
quelle
BrowserRouter
enthält das Kontextobjekt meiner Komponenten keinrouter
Objekt. Mache ich etwas falschrouter: React.PropTypes.object.isRequired
. Ich weiß nicht, warum es ohneisRequired
Schlüssel nicht funktioniert hat . Auch<Link>
scheint in der Lage zu sein , die bekommenhistory
Kontext, aber ich konnte es nicht replizieren.this.props.history.push()
in React Router v4 verwenden. Ich fand dies nur, indem ich die Requisiten inspizierte, die React Router übergibt. Es scheint zu funktionieren, aber ich bin mir nicht sicher, ob es eine gute Idee ist.wieder das ist JS :) das funktioniert immer noch ....
quelle