प्रतिक्रिया रूटर v4

Question

में प्रतिक्रिया रूटर v3 मैं props.location.query.foo साथ इसे का उपयोग कर सकता है (यदि वर्तमान स्थान ?foo=bar था)

में react-router-dom@4.0.0props.location केवल साथ props.location.search है में क्वेरी स्ट्रिंग पार्स कैसे ?foo=bar&other=thing तरह की स्ट्रिंग होती।

शायद मुझे foo या other के मान को खोजने के लिए उस स्ट्रिंग को मैन्युअल रूप से पार्स और डिसोनस्ट्रक्चर करने की आवश्यकता है।

console.log(this.props) का स्क्रीनशॉट: (ध्यान दें कि कैसे ?artist=band यहां से मैं artist जो मूल्य band है से मूल्य प्राप्त करना चाहते हैं)

Answer 1

ऐसा लगता है कि आप पहले से ही सही मान लिया। क्वेरी स्ट्रिंग को पार्स करने की क्षमता V4 से ली गई थी क्योंकि विभिन्न कार्यान्वयन का समर्थन करने के लिए वर्षों से अनुरोध किए गए हैं। इसके साथ, टीम ने फैसला किया कि उपयोगकर्ताओं के लिए यह तय करना सबसे अच्छा होगा कि यह कार्यान्वयन कैसा दिखता है। हम एक क्वेरी स्ट्रिंग lib आयात करने की सलाह देते हैं। one you mentioned ने अभी तक मेरे लिए बहुत अच्छा काम किया है।

const queryString = require('query-string'); 

const parsed = queryString.parse(props.location.search); 

तुम भी new URLSearchParams उपयोग कर सकते हैं अगर आप कुछ देशी चाहते हैं और आप निर्णय here

Answer 2

मैं इस पोस्ट पाया खुशी के बारे में अधिक पढ़ सकते हैं यह आपकी आवश्यकताओं

const search = props.location.search; // could be '?foo=bar' 
const params = new URLSearchParams(search); 
const foo = params.get('foo'); // bar 

के लिए काम करता है। लिंक के लिए धन्यवाद, कुछ घंटों के बाद मुझे अंत में अपना कोड अपग्रेड कर दिया गया।

आप में से जो प्रश्न-स्ट्रिंग का उपयोग के लिए, आप की तरह

var nameYouWant = queryString.parse(this.props.location.search).nameYouWant; 

यह मेरे मामले में हुआ कुछ करने के लिए हो सकता है, और this.props.location.search.theUrlYouWant काम करने के लिए मना कर दिया जाएगा। दूसरा विकल्प टायलर ने भी कुछ समान tweaking के साथ मेरे लिए काम किया।