Lesen Sie die aktuelle vollständige URL mit Reagieren?

132

Wie erhalte ich die vollständige URL aus einer ReactJS-Komponente?

Ich denke, es sollte so etwas sein, this.props.locationaber es ist soundefined

Doug
quelle

Antworten:

215

window.location.href ist was du suchst.

wahrscheinlich auf
quelle
16
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:

window.location.pathname

console.log(window.location.pathname); //yields: "/js" (where snippets run)
console.log(window.location.href);     //yields: "https://stacksnippets.net/js"

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!

lewdev
quelle
2
Sie können genau das für Pfadname tunwindow.location.pathname
Abdulla Zulqarnain
39

this.props.locationist eine React-Router-Funktion , die Sie installieren müssen, wenn Sie sie verwenden möchten.

Hinweis: Gibt nicht die vollständige URL zurück.

imrok
quelle
8
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...

James
quelle
3
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

Beispiel

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class className extends Component {

      render(){
           return(
                ....
                  )
              }
}

export default withRouter(className)
Alex Varghese
quelle
1

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

let urlElelement = (urlElements[0])

Und jetzt können Sie den Wert von urlElement verwenden, der der spezifische Teil Ihrer URL ist, wo immer Sie möchten.

bis 240
quelle
0

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

...

const getA = memoize(() => document.createElement('a'));
const getCleanA = () => Object.assign(getA(), { href: '' });

const MyComponent = ({ location }) => {
  const { href } = Object.assign(getCleanA(), location);

  ...

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?

Yurii Haiovyi
quelle
-3

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

Amit Lopes
quelle
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.
Alexis Wilke