प्रतिक्रिया-राउटर में क्वेरीस्ट्रिंग

Question

मैं क्वेरी स्ट्रिंग के साथ रूट पथ सेट करने का प्रयास कर रहा हूं। की लाइनों में कुछ:

www.mywebsite.com/results?query1=:query1&query2=:query2&query3=:query3 

मैं करने के लिए "परिणाम" संक्रमण से घटक इतनी तरह होगा:

<Route path="/" component={Main}> 
    <IndexRoute component={Home} /> 
    <Route path="results?query1=:query1&query2=:query2&query3=:query3" 
    component={SearchResults} /> 
</Route> 

खोज-कंटेनर में मैं चाहूँगा उपयोग करने के लिए सक्षम होने के लिए QUERY1, QUERY2 करना और क्वेरी 3 पैरा।

मैं इसे काम करने में सक्षम नहीं हूं। मैं निम्नलिखित त्रुटि मिलती है:

bundle.js:22627 Warning: [react-router] Location "/results?query1=1&query2=2&query3=3" did not match any routes

मैं निम्नलिखित गाइड में चरणों का पालन करने की कोशिश की: (धारा: क्या क्वेरी स्ट्रिंग पैरामीटर के बारे में) https://www.themarketingtechnologist.co/react-router-an-introduction/

मैं यहाँ कुछ मदद मिल सकती है?

Answer 1

यदि आप रिएक्ट राउटर v2.xx का उपयोग कर रहे हैं, तो आप अपने रूट घटक में location.query ऑब्जेक्ट के माध्यम से क्वेरी पैरामीटर तक पहुंच सकते हैं।

दूसरे शब्दों में, आपको निम्न प्रकार दिखने के लिए अपने मार्ग फिर से काम कर सकते हैं:

<Route path="results" component={SearchResults} /> 

और फिर अपने SearchResults घटक के अंदर, क्वेरी पैरामीटर मान का उपयोग करने के this.props.location.query.query1 का उपयोग करें (समान query2 और query3 के लिए)।

संपादित करें: यह अभी भी प्रतिक्रिया राउटर v3.xx के मामले में है।

Answer 2

यदि आप रिएक्ट राउटर का उपयोग कर रहे हैं> = v4 location.query अब और उपलब्ध नहीं है। आप प्लग-इन कर सकते हैं एक बाहरी पुस्तकालय (जैसे https://www.npmjs.com/package/query-string), या कुछ इस तरह का उपयोग करें: