Comment obtenir l'URL complète à partir d'un composant ReactJS ?
Je pense que ça devrait être quelque chose comme this.props.location mais c'est undefined
Veuillez noter qu'il peut y avoir des problèmes du côté du serveur, s'il n'est pas configuré correctement.
J'avais besoin de window.location pour une fonctionnalité côté client. J'ai donc défini l'emplacement dans l'état de mon composant onMount afin d'éviter les problèmes lors du rendu côté serveur.
Cela ne fonctionne pas. ou bien aidez-moi à structurer cela en react. J'ai utilisé const ddd = window.location.href ; console.log(ddd) ;
Si vous avez besoin du chemin complet de votre URL, vous pouvez utiliser vanilla Javascript :
window.location.href
Pour obtenir juste le chemin (sans 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"Fuente: Propriété du chemin d'accès - W3Schools
Si vous n'utilisez pas encore "react-router", vous pouvez l'installer en utilisant :
yarn add react-router
puis dans un React.Component au sein d'une "Route", vous pouvez appeler :
this.props.location.pathname
Cela renvoie le chemin, sans le nom de domaine.
Merci @abdulla-zulqarnain !
this.props.location est une fonctionnalité de react-router que vous devrez installer si vous voulez l'utiliser.
Note : ne renvoie pas l'url complète.
Vous obtenez undefined car vous avez probablement les composants en dehors de React Router.
N'oubliez pas que vous devez vous assurer que le composant à partir duquel vous faites appel à la fonction this.props.location est à l'intérieur d'un <Route /> comme celui-ci :
<Route path="/dashboard" component={Dashboard} />
Ensuite, à l'intérieur du composant Dashboard, vous avez accès à this.props.location ...
Et si votre composant ne se trouve pas dans un <Route /> vous pouvez utiliser avecRouter composante d'ordre supérieur.
Vous pouvez accéder à l'uri/url complet avec 'document.referrer'.
Vérifiez https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
