2016-02-15 18 views
5

इम रूटर प्रतिक्रिया इस तरह मेरे एप्लिकेशन में एक पृष्ठ पर नेविगेट करने का उपयोग कर:रूटर प्रतिक्रिया, लिंक के साथ रंगमंच की सामग्री पारित

<Link to={`/single/${this.props.data.pageId}`} params={{singleId: 1}}>GotoPage!</Link> 

यह ठीक काम करता है लेकिन मैं यह भी नया पृष्ठ के लिए एक अतिरिक्त संपत्ति पारित करने के लिए करना चाहते हैं।

जब लिंक का उपयोग किए बिना एक घटक प्रतिपादन मैं की तरह कुछ करना होगा:

<MyComponent myProp={this.props.data}/> 

मैं इस तरह पैरामीटर में साथ myProp={this.props.data} गुजर की कोशिश की है:

<Link to={`/single/${this.props.data.pageId}`} params={{singleId: 1, myProp={this.props.data}}}>GotoPage!</Link> 

लेकिन यह के रूप में काम करने के लिए प्रतीत नहीं होता MyProp को पृष्ठ पर विरोध करने के रूप में नए पृष्ठ पर अपरिभाषित किया गया है जिसे मैं प्राप्त कर सकता हूं:

this.props.params.pageId; 

क्या मुझे Link के साथ गैर-रूट संबंधित पैरामीटर पारित करने में सक्षम नहीं होना चाहिए?

उत्तर

2

Link और स्रोत के लिए, param लेने का कोई उल्लेख नहीं है। लेकिन मुझे वह मिलता है जो आप करने की कोशिश कर रहे हैं।

हार्ड-कोडिंग मार्गों के बजाय, क्या मैं प्रतिक्रिया-राउटर के इतिहास फ़ंक्शन router.push() का उपयोग करने की अनुशंसा कर सकता हूं। इस के बजाय कुछ ऐसा कार्य करें:

class Foo extends React.Component { 
    ... 
    const handleNewRoute =() => { 
    let { pageId } = this.props.data 
    let singleId = '1' 
    this.context.router.push({ // use push 
     pathname: `/single/${pageId}`, 
     query: { singleId } 
    }) 
    } 

    render() { 
    return (
     <button onLeftClick={this.handleNewRoute} /> 
    ) 
    } 
} 

वैसे, प्रतिक्रिया/JSX में, ...{{singleId: 1, myProp={this.props.data}}}... की तरह कुछ <Link...foobar={{singleId: 1, myProp: this.props.data}}> होना चाहिए। पूर्व वाक्यविन्यास गलत है।

+0

यह काम किया! मुझे यह .context.router.push को बदलना पड़ा .context.history.push जो v.2 के लिए नया वाक्यविन्यास प्रतीत होता है धन्यवाद! – user2915962

1

मुझे लगता है कि अतिरिक्त डेटा प्राप्त करने का बेहतर तरीका एक AJAX है।

लेकिन यदि आप ऐसा करने का अपना तरीका चाहते हैं, तो मैं लिंक की एपीआई जांचता हूं और मुझे एक क्वेरी प्रॉपर्टी मिलती है।

query: 

An object of key:value pairs to be stringified. 

ताकि आप की कुंजी एक वस्तु पारित करने के लिए इस का उपयोग कर सकते हैं: अगले मार्ग के लिए मूल्य है, लेकिन इस वस्तु stringified किया जाएगा और पारित कर दिया है, हालांकि यूआरएल मैं think.I इस के लिए एक ajax पसंद करते हैं।

+0

क्या आप इस परिदृश्य में AJAX के उपयोग का उदाहरण दे सकते हैं –

संबंधित मुद्दे