Lesen Sie die aktuelle vollständige URL mit Reagieren?

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

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

window.location.href ist was du suchst.

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!

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.

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...

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)

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.

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?

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