प्रतिक्रिया के साथ वर्तमान पूर्ण URL पढ़ें?

137

मैं एक ReactJS घटक के भीतर से पूरा URL कैसे प्राप्त करूं?

मैं सोच रहा हूं कि यह कुछ ऐसा होना चाहिए this.props.locationलेकिन यह हैundefined

reactjs

— डौग
स्रोत

219

window.location.href वह है जो आप ढूंढ रहे हैं।

— probablyup
स्रोत

16

कृपया ध्यान दें कि यदि यह ठीक से कॉन्फ़िगर नहीं किया गया है, तो सर्वर की तरफ समस्या हो सकती है।

— शोता

2

मुझे एक सुविधा के लिए window.location की आवश्यकता है जो क्लाइंट साइड है। इसलिए मैंने सर्वर पर रेंडर करते समय मुद्दों से बचने के लिए अपने घटक के राज्य में स्थान सेट किया।

— अरविंद श्रीधरन

यह काम नहीं कर रहा है। या कृपया प्रतिक्रिया में मेरी संरचना में मदद करें। मैंने const ddd = window.location.href का

— शूरवीर मोरी

1

वेबपैक यह कहते हुए शिकायत करेगा कि 'विंडो डिफाइन नहीं है'

— फ्रांज See

@FranzSee हाँ सर्वर-साइड कोड में कोई "विंडो" नहीं है, इसलिए यदि आपका वातावरण है तो आपको req.originalUrlएक्सप्रेस या व्हाट्सएप जैसी किसी चीज़ का उपयोग करने की आवश्यकता होगी । SSR सपोर्ट वाली विभिन्न रिएक्टिंग रूटिंग लाइब्रेरी में यह जानकारी प्राप्त करने के तरीके हैं।

— संभवतः

60

यदि आपको अपने URL के पूर्ण पथ की आवश्यकता है, तो आप वेनिला जावास्क्रिप्ट का उपयोग कर सकते हैं:

window.location.href

केवल पथ (माइनस डोमेन नाम) प्राप्त करने के लिए, आप इसका उपयोग कर सकते हैं:

window.location.pathname

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

स्निपेट का विस्तार करें

स्रोत: स्थान pathname गुण - W3Schools

यदि आप पहले से ही "प्रतिक्रिया-राउटर" का उपयोग नहीं कर रहे हैं, तो आप इसका उपयोग करके इसे स्थापित कर सकते हैं:

yarn add react-router

फिर एक React.Component में "रूट" के भीतर, आप कॉल कर सकते हैं:

this.props.location.pathname

यह डोमेन नाम सहित नहीं, पथ देता है।

धन्यवाद @ अब्दुल्ला-ज़ुल्कारनैन!

— lewdev
स्रोत

2

आप window.location.pathname

— पथने के

40

this.props.locationएक प्रतिक्रिया-राउटर सुविधा है , यदि आपको इसका उपयोग करना है तो आपको इंस्टॉल करना होगा।

नोट: पूर्ण url वापस नहीं करता है।

— imrok
स्रोत

8

नोट: यह पूर्ण url (होस्ट नाम, प्रोटोकॉल, आदि) नहीं

— लौटाता है

13

आपको मिल रहा है undefinedक्योंकि आपके पास संभवतः रिएक्ट राउटर के बाहर के घटक हैं।

याद रखें कि आपको यह सुनिश्चित करने की आवश्यकता है कि जिस घटक से आप कॉल कर रहे हैं वह इस तरह के घटक के this.props.locationअंदर है <Route />:

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

फिर डैशबोर्ड घटक के अंदर, आपके पास this.props.location...

— जेम्स
स्रोत

3

और यदि आपके घटक एक के अंदर नहीं है <Route />आप उपयोग कर सकते withRouter उच्च क्रम घटक।

— अहमद मालेकी

3

प्राप्त करने के लिए वर्तमान रूटर उदाहरण या वर्तमान स्थान आप के साथ एक उच्च आदेश घटक बनाने के लिए withRouter से react-router-dom। अन्यथा, जब आप एक्सेस करने का प्रयास कर रहे हैं तो this.props.locationयह वापस आ जाएगा undefined

उदाहरण

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

class className extends Component {

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

export default withRouter(className)

— एलेक्स वर्गीज
स्रोत

1

बस इस पृष्ठ पर थोड़ा और प्रलेखन जोड़ने के लिए - मैं थोड़ी देर के लिए इस समस्या से जूझ रहा हूं।

जैसा कि ऊपर कहा गया है, URL प्राप्त करने का सबसे आसान तरीका है window.location.href।

फिर हम उपयोग करके वेनिला जावास्क्रिप्ट के माध्यम से URL के कुछ हिस्सों को निकाल सकते हैं let urlElements = window.location.href.split('/')

फिर हम console.log(urlElements)URL पर .split () कॉलिंग द्वारा निर्मित तत्वों के एरे को देखना चाहते हैं।

एक बार जब आपको पता चलता है कि आप जिस ऐरे में पहुंचना चाहते हैं, उसे किस इंडेक्स में रखा गया है, तो आप इसे एक वेरिएबल में असाइन कर सकते हैं

let urlElelement = (urlElements[0])

और अब आप urlElement के मूल्य का उपयोग कर सकते हैं, जो आपके URL का विशिष्ट हिस्सा होगा, जहाँ आप चाहें।

— to240
स्रोत

0

जैसा कि किसी और ने उल्लेख किया है, पहले आपको react-routerपैकेज की आवश्यकता है। लेकिन locationऑब्जेक्ट जो आपको प्रदान करता है उसमें पार्स किए गए url शामिल हैं।

लेकिन अगर आप वैश्विक चरों तक पहुंच के बिना पूर्ण रूप से खराब यूआरएल चाहते हैं, तो मेरा मानना है कि ऐसा करने का सबसे तेज़ तरीका है

...

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

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

  ...

href पूर्ण url युक्त एक है।

के लिए memoizeमैं आमतौर पर उपयोग करें lodash, यह उस अधिकांशतः इस आवश्यकता के बिना नए तत्व बनाने से बचने के लिए लागू किया गया है।

पुनश्च: निश्चित रूप से आप प्राचीन ब्राउज़रों द्वारा प्रतिबंधित नहीं हैं जिन्हें आप new URL()बात करना चाह सकते हैं , लेकिन मूल रूप से पूरी स्थिति कमोबेश बेकार है, क्योंकि आप एक या दूसरे तरीके से वैश्विक चर का उपयोग करते हैं। तो window.location.hrefबजाय उपयोग करने के लिए क्यों ?

— यूरी हैओवेयी
स्रोत

-3

आप पूर्ण uri / url को 'document.referrer' से एक्सेस कर सकते हैं।

Https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer पर चेक करें

— अमित लोपेज
स्रोत

रेफ़रर उस पृष्ठ का URL है जहाँ आप इस पृष्ठ पर पहुँचने से पहले थे। यह भी सेट नहीं किया जा सकता है। यद्यपि यह उपयोगकर्ता के आंदोलनों को ट्रैक करने के लिए उपयोगी हो सकता है, यह शायद ही कभी हो जब आप URL की तलाश कर रहे हों।

— एलेक्सिस विल्के