Leggi l'attuale URL completo con React?

Come ottengo l'URL completo da un componente ReactJS?

Penso che dovrebbe essere qualcosa di simile this.props.locationma lo èundefined

window.location.href è quello che stai cercando.

Se hai bisogno del percorso completo del tuo URL, puoi utilizzare Javascript vanilla:

window.location.href

Per ottenere solo il percorso (meno il nome di dominio), puoi utilizzare:

window.location.pathname

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

Origine: proprietà nome percorso posizione - W3Schools

Se non stai già usando "react-router" puoi installarlo usando:

yarn add react-router

quindi in un React.Component all'interno di una "Route", puoi chiamare:

this.props.location.pathname

Ciò restituisce il percorso, escluso il nome di dominio.

Grazie @ abdulla-zulqarnain!

this.props.locationè una funzionalità di React-Router , che dovrai installare se vuoi usarla.

Nota: non restituisce l'URL completo.

Stai ottenendo undefinedperché probabilmente hai i componenti al di fuori di React Router.

Ricorda che devi assicurarti che il componente da cui stai chiamando this.props.locationsia all'interno di un <Route />componente come questo:

<Route path="/dashboard" component={Dashboard} />

Quindi all'interno del componente Dashboard, hai accesso a this.props.location...

Per ottenere l' istanza del router corrente o la posizione corrente devi creare un componente di ordine superiore con withRouter da react-router-dom. altrimenti, quando si tenta di accedervi this.props.location, tornerà undefined

Esempio

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

class className extends Component {

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

export default withRouter(className)

Solo per aggiungere un po 'di ulteriore documentazione a questa pagina, ho lottato con questo problema per un po'.

Come detto sopra, il modo più semplice per ottenere l'URL è tramite window.location.href.

possiamo quindi estrarre parti dell'URL tramite Javascript vanilla utilizzando let urlElements = window.location.href.split('/')

Vorremmo quindi console.log(urlElements)vedere l'array di elementi prodotto chiamando .split () sull'URL.

Dopo aver trovato l'indice dell'array a cui si desidera accedere, è possibile assegnarlo a una variabile

let urlElelement = (urlElements[0])

E ora puoi utilizzare il valore di urlElement, che sarà la parte specifica del tuo URL, ovunque tu voglia.

Come ha detto qualcun altro, prima hai bisogno di react-routerpackage. Ma l' locationoggetto che ti fornisce contiene l'URL analizzato.

Ma se vuoi un URL completo senza accedere alle variabili globali, credo che il modo più veloce per farlo sarebbe

...

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

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

  ...

href è quello contenente un URL completo.

Poiché di memoizesolito uso lodash, è implementato in questo modo principalmente per evitare di creare nuovi elementi senza necessità.

PS: Ovviamente non sei limitato dai browser antichi che potresti voler provare new URL(), ma fondamentalmente l'intera situazione è più o meno inutile, perché accedi alle variabili globali in un modo o nell'altro. Allora perché non usarlo window.location.hrefinvece?

Puoi accedere a uri / url completo con 'document.referrer'

Controlla https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer