प्रतिक्रिया-राउटर v4 में history.push के साथ पैरा कैसे पास करें?

Question

हम प्रतिक्रिया-राउटर v4 में this.props.history.push('/page') के साथ पैरामीटर कैसे पास कर सकते हैं?

सभी की

.then(response => { 
     var r = this; 
     if (response.status >= 200 && response.status < 300) { 
      r.props.history.push('/template'); 
      }); 

Answer 1

सबसे पहले, आप if statement में इस रूप में var r = this; करने की जरूरत नहीं कॉलबैक ही जो जब से तुम तीर समारोह का उपयोग कर रहे प्रतिक्रिया घटक संदर्भ को संदर्भित करता के संदर्भ को दर्शाता है।

डॉक्स के अनुसार:

इतिहास वस्तुओं आम तौर पर निम्नलिखित गुण और विधियों है:

• लंबाई - (संख्या) इतिहास ढेर
• कार्रवाई में प्रविष्टियों की संख्या - (स्ट्रिंग) वर्तमान क्रिया (पुश, प्रतिस्थापन, या पीओपी)

• स्थान - (ऑब्जेक्ट) वर्तमान स्थान। निम्नलिखित गुण हो सकता है:

  • पथ नाम - (स्ट्रिंग) यूआरएल
  • खोज के रास्ते - (स्ट्रिंग) यूआरएल क्वेरी स्ट्रिंग
  • हैश - (स्ट्रिंग) यूआरएल हैश टुकड़ा
  • राज्य - (स्ट्रिंग) स्थान-विशिष्ट स्थिति जो उदाहरण के लिए प्रदान की गई थी पुश (पथ, राज्य) जब यह स्थान स्टैक पर धकेल दिया गया था। केवल ब्राउज़र और मेमोरी इतिहास में उपलब्ध है।
• धक्का (पथ, [राज्य]) - (समारोह) धक्का इतिहास ढेर
• पर एक नई प्रविष्टि की जगह (पथ, [राज्य]) - (समारोह) इतिहास ढेर
पर वर्तमान प्रविष्टि बदलता है
• जाने (एन) - (समारोह) एन प्रविष्टियों
• GoBack() द्वारा इतिहास ढेर में सूचक ले जाता है - (समारोह) जाने के लिए समतुल्य (-1)
• goForward() - (समारोह) समतुल्य जाना (1)
• ब्लॉक (प्रॉम्प्ट) - (फ़ंक्शन) नेविगेशन
रोकता है

तो तुम

this.props.history.push({ 
    pathname: '/template', 
    search: '?query=abc', 
    state: { detail: response.data } 
}) 

या लिंक घटक के लिए इसी तरह

<Link to={{ 
     pathname: '/template', 
     search: '?query=abc', 
     state: { detail: response.data } 
    }}> My Link </Link> 

और की तरह इतिहास वस्तु को पास सहारा पारित कर सकते हैं नेविगेट जबकि उसके घटक है जो /template साथ प्रदान की गई है में मार्ग, आप

this.props.location.state.detail 

जैसे पारित प्रोप तक पहुंच सकते हैं

यह भी ध्यान रखें कि, जब प्रोप से इतिहास या स्थान ऑब्जेक्ट का उपयोग करते हैं तो आपको घटक को withRouter से कनेक्ट करने की आवश्यकता होती है।

डॉक्स के अनुसार:

withRouter

आप इतिहास ऑब्जेक्ट के गुणों और withRouter उच्च क्रम घटक के माध्यम से सबसे करीब <Route>'s मैच के लिए उपयोग कर सकते हैं। withRouter हर बार मार्ग के साथ <Route>props: { match, location, history } प्रस्तुत करने के साथ बदलता है, इसके घटक को फिर से प्रस्तुत करेगा।

Answer 2

क्वेरी पैरामीटर प्राप्त करने के लिए जानकारी जोड़ें।

const queryParams = new URLSearchParams(this.props.location.search); 
console.log('assuming query param is id', queryParams.get('id'); 

लिए URLSearchParams बारे में अधिक जानकारी के लिए इस लिंक URLSearchParams