Lire l'URL complète actuelle avec React?

Comment obtenir l'URL complète à partir d'un composant ReactJS?

Je pense que ça devrait être quelque chose comme this.props.locationmais ça l'estundefined

window.location.href est ce que vous recherchez.

Si vous avez besoin du chemin complet de votre URL, vous pouvez utiliser du Javascript vanille:

window.location.href

Pour obtenir uniquement le chemin (moins le nom de domaine), vous pouvez utiliser:

window.location.pathname

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

Source: Propriété du chemin de l'emplacement - W3Schools

Si vous n'utilisez pas déjà "react-router", vous pouvez l'installer en utilisant:

yarn add react-router

puis dans un React.Component dans une "Route", vous pouvez appeler:

this.props.location.pathname

Cela renvoie le chemin, sans inclure le nom de domaine.

Merci @ abdulla-zulqarnain!

this.props.locationest une fonctionnalité de react-router , vous devrez l'installer si vous souhaitez l'utiliser.

Remarque: ne renvoie pas l'URL complète.

Vous obtenez undefinedparce que vous avez probablement les composants en dehors de React Router.

N'oubliez pas que vous devez vous assurer que le composant à partir duquel vous appelez se this.props.locationtrouve à l'intérieur d'un <Route />composant tel que celui-ci:

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

Ensuite, dans le composant Dashboard, vous avez accès à this.props.location...

Pour obtenir l' instance de routeur actuelle ou l'emplacement actuel, vous devez créer un composant d'ordre supérieur avec withRouter from react-router-dom. sinon, lorsque vous essayez d'y accéder, this.props.locationil retournera undefined

Exemple

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

class className extends Component {

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

export default withRouter(className)

Juste pour ajouter un peu plus de documentation à cette page - je me débat avec ce problème depuis un certain temps.

Comme indiqué ci-dessus, le moyen le plus simple d'obtenir l'URL est via window.location.href.

nous pouvons ensuite extraire des parties de l'URL via Javascript vanilla en utilisant let urlElements = window.location.href.split('/')

On verrait alors console.log(urlElements)le tableau d'éléments produit en appelant .split () sur l'URL.

Une fois que vous avez trouvé l'index du tableau auquel vous souhaitez accéder, vous pouvez ensuite l'affecter à une variable

let urlElelement = (urlElements[0])

Et maintenant, vous pouvez utiliser la valeur de urlElement, qui sera la partie spécifique de votre URL, où vous le souhaitez.

Comme quelqu'un d'autre l'a mentionné, vous avez d'abord besoin d'un react-routerpackage. Mais l' locationobjet qu'il vous fournit contient une URL analysée.

Mais si vous voulez mal une URL complète sans accéder aux variables globales, je pense que le moyen le plus rapide de le faire serait

...

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

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

  ...

href est celui contenant une URL complète.

Pour memoizej'utilise habituellement lodash, il est implémenté de cette façon principalement pour éviter de créer un nouvel élément sans nécessité.

PS: Bien sûr, si vous n'êtes pas limité par les anciens navigateurs, vous voudrez peut-être essayer new URL()quelque chose, mais fondamentalement, toute la situation est plus ou moins inutile, car vous accédez à la variable globale d'une manière ou d'une autre. Alors pourquoi ne pas l'utiliser à la window.location.hrefplace?

Vous pouvez accéder à l'URI / url complet avec 'document.referrer'

Vérifiez https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer