Ich verwende react-router v4 und Material-Ui in meiner React-App. Ich habe mich gefragt, wie man die URL ändert, wenn man innerhalb von GridList auf ein GridTile klickt .
Meine ursprüngliche Idee war, einen Handler für onTouchTap zu verwenden. Die einzige Möglichkeit, die Umleitung zu sehen, besteht jedoch darin, die Komponenten Redirect oder Link zu verwenden. Wie kann ich die URL ändern, ohne diese beiden Komponenten zu rendern?
Ich habe versucht, this.context.router.push('/foo') , aber es scheint nicht zu funktionieren.
Probieren Sie das aus,
%Vor%Warnung funktioniert für Versionen vor Version 4
und
%Vor%für v4 und höher
Reagieren Router v4
Es gibt ein paar Dinge, die ich brauchte, damit das reibungslos funktionierte.
Die Dokumentseite des Auth-Workflows enthält eine Menge von dem, was benötigt wird. p>
Allerdings hatte ich drei Probleme
props.history ? Route -Komponente props möchte? Ich endete mit:
<Route render> was dir props.history bringt, was dann an die Kinder weitergegeben werden kann. render={routeProps => <MyComponent {...props} {routeProps} />} , um andere props aus diese Antwort auf "react-router - Übergeben von Requisiten an die Handler-Komponente" N.B. Bei der Methode render müssen Sie die Requisiten explizit von der Komponente Route durchlaufen. Außerdem möchten Sie aus Leistungsgründen render und nicht component verwenden ( component erzwingt jedes Mal ein erneutes Laden).
Eines der verwirrenden Dinge, die ich fand, ist, dass in einigen der React Router v4-Dokumente MyComponent = ({ match }) ie Objektdestrukturierung , was zunächst bedeutete, dass Route drei Props, match , location und history
Ich denke, einige der anderen Antworten gehen davon aus, dass alles über JavaScript-Klassen erfolgt.
Hier ist ein Beispiel, und wenn Sie kein props durchreichen müssen, können Sie einfach component
So habe ich Ähnliches gemacht. Ich habe Kacheln, die Thumbnails zu YouTube-Videos sind. Wenn ich auf die Kachel klicke, werde ich auf eine Player-Seite weitergeleitet, auf der die Video-ID verwendet wird, um das richtige Video auf die Seite zu rendern.
%Vor%ETA: Entschuldigung, ich habe gerade bemerkt, dass Sie aus irgendeinem Grund die LINK- oder REDIRECT-Komponenten nicht verwenden wollten. Vielleicht hilft meine Antwort noch irgendwie. ; )
Tags und Links javascript react-router react-router-v4 material-ui