Bitte beachten Sie, dass es auf der Serverseite zu Problemen kommen kann, wenn diese nicht richtig konfiguriert sind.
Shota
2
Ich brauchte window.location für eine Funktion, die clientseitig ist. Daher habe ich den Speicherort im Status meiner Komponente onMount festgelegt, um Probleme beim Rendern auf der Serverseite zu vermeiden.
Arvind Sridharan
es funktioniert nicht. oder helfen Sie mir bitte mit der Struktur davon zu reagieren. Ich habe const ddd = window.location.href verwendet; console.log (ddd);
Shurvir Mori
1
Webpack wird sich über dieses Sprichwort beschweren "Fenster ist nicht definiert"
Franz Siehe
@FranzSee ja, es gibt kein "Fenster" im serverseitigen Code. Wenn dies also Ihre Umgebung ist, müssen Sie etwas wie req.originalUrlExpress oder so weiter verwenden. Die verschiedenen React-Routing-Bibliotheken mit SSR-Unterstützung verfügen über Methoden zum Abrufen dieser Informationen.
wahrscheinlich bis zum
58
Wenn Sie den vollständigen Pfad Ihrer URL benötigen, können Sie Vanille-Javascript verwenden:
window.location.href
Um nur den Pfad (minus Domainnamen) zu erhalten, können Sie Folgendes verwenden:
Hinweis: Dies gibt nicht die vollständige URL (Hostname, Protokoll usw.) zurück
SgtPooki
13
Sie bekommen undefined weil Sie wahrscheinlich die Komponenten außerhalb von React Router haben.
Denken Sie daran, dass Sie sicherstellen müssen, dass sich die Komponente, von der Sie aufrufen, this.props.locationin einer <Route />Komponente wie der folgenden befindet:
<Route path="/dashboard" component={Dashboard} />
Innerhalb der Dashboard-Komponente haben Sie dann Zugriff auf this.props.location...
Und wenn sich Ihre Komponente nicht in einer befindet <Route />, können Sie sie mit der Router -Komponente höherer Ordnung verwenden.
Ahmad Maleki
3
Um die aktuelle Router-Instanz oder den aktuellen Speicherort abzurufen, müssen Sie eine Komponente höherer Ordnung mit withRouter from erstellen react-router-dom. Andernfalls, wenn Sie versuchen, darauf zuzugreifenthis.props.location , es wird zurückkehren undefined
Wie schon jemand anderes erwähnt hat, braucht man zuerst ein react-routerPaket. Das locationObjekt, das es Ihnen zur Verfügung stellt, enthält eine analysierte URL.
Aber wenn Sie eine vollständige URL ohne Zugriff auf globale Variablen benötigen, ist dies meiner Meinung nach der schnellste Weg
href ist derjenige, der eine vollständige URL enthält.
Für memoizemich in der Regel verwende lodash, wird es ausgeführt , dass Art und Weise meist neues Element ohne Notwendigkeit zu schaffen zu vermeiden.
PS: Natürlich sind Sie nicht durch alte Browser eingeschränkt, die Sie vielleicht ausprobieren möchten new URL(), aber im Grunde ist die gesamte Situation mehr oder weniger sinnlos, weil Sie auf die eine oder andere Weise auf globale Variablen zugreifen. Warum also nicht window.location.hrefstattdessen verwenden?
Der Verweis ist die URL zu der Seite, auf der Sie sich vor Erreichen dieser Seite befanden. Es kann auch nicht eingestellt werden. Obwohl es nützlich sein kann, Benutzerbewegungen zu verfolgen, ist es selten das, was Sie wollen, wenn Sie nach der URL suchen.
req.originalUrl
Express oder so weiter verwenden. Die verschiedenen React-Routing-Bibliotheken mit SSR-Unterstützung verfügen über Methoden zum Abrufen dieser Informationen.Wenn Sie den vollständigen Pfad Ihrer URL benötigen, können Sie Vanille-Javascript verwenden:
window.location.href
Um nur den Pfad (minus Domainnamen) zu erhalten, können Sie Folgendes verwenden:
window.location.pathname
Quelle: Standort Pfadname Eigenschaft - W3Schools
Wenn Sie "React-Router" noch nicht verwenden, können Sie ihn installieren mit:
yarn add react-router
Dann können Sie in einer React.Component innerhalb einer "Route" Folgendes aufrufen:
this.props.location.pathname
Dies gibt den Pfad ohne den Domänennamen zurück.
Danke @ abdulla-zulqarnain!
quelle
window.location.pathname
this.props.location
ist eine React-Router-Funktion , die Sie installieren müssen, wenn Sie sie verwenden möchten.Hinweis: Gibt nicht die vollständige URL zurück.
quelle
Sie bekommen
undefined
weil Sie wahrscheinlich die Komponenten außerhalb von React Router haben.Denken Sie daran, dass Sie sicherstellen müssen, dass sich die Komponente, von der Sie aufrufen,
this.props.location
in einer<Route />
Komponente wie der folgenden befindet:<Route path="/dashboard" component={Dashboard} />
Innerhalb der Dashboard-Komponente haben Sie dann Zugriff auf
this.props.location
...quelle
<Route />
, können Sie sie mit der Router -Komponente höherer Ordnung verwenden.Um die aktuelle Router-Instanz oder den aktuellen Speicherort abzurufen, müssen Sie eine Komponente höherer Ordnung mit
withRouter
from erstellenreact-router-dom
. Andernfalls, wenn Sie versuchen, darauf zuzugreifenthis.props.location
, es wird zurückkehrenundefined
Beispiel
quelle
Nur um dieser Seite eine weitere Dokumentation hinzuzufügen - ich habe eine Weile mit diesem Problem zu kämpfen.
Wie oben erwähnt, ist der einfachste Weg, die URL zu erhalten, über
window.location.href
.Wir können dann Teile der URL durch Vanille-Javascript extrahieren, indem wir verwenden
let urlElements = window.location.href.split('/')
Wir würden dann
console.log(urlElements)
das Array von Elementen sehen, das durch Aufrufen von .split () auf der URL erzeugt wird.Nachdem Sie den Index in dem Array gefunden haben, auf den Sie zugreifen möchten, können Sie diesen einer Variablen zuweisen
Und jetzt können Sie den Wert von urlElement verwenden, der der spezifische Teil Ihrer URL ist, wo immer Sie möchten.
quelle
Wie schon jemand anderes erwähnt hat, braucht man zuerst ein
react-router
Paket. Daslocation
Objekt, das es Ihnen zur Verfügung stellt, enthält eine analysierte URL.Aber wenn Sie eine vollständige URL ohne Zugriff auf globale Variablen benötigen, ist dies meiner Meinung nach der schnellste Weg
href
ist derjenige, der eine vollständige URL enthält.Für
memoize
mich in der Regel verwendelodash
, wird es ausgeführt , dass Art und Weise meist neues Element ohne Notwendigkeit zu schaffen zu vermeiden.PS: Natürlich sind Sie nicht durch alte Browser eingeschränkt, die Sie vielleicht ausprobieren möchten
new URL()
, aber im Grunde ist die gesamte Situation mehr oder weniger sinnlos, weil Sie auf die eine oder andere Weise auf globale Variablen zugreifen. Warum also nichtwindow.location.href
stattdessen verwenden?quelle
Sie können mit 'document.referrer' auf die vollständige URL / URL zugreifen.
Überprüfen Sie https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer
quelle