React.js राउटर के साथ पैरामीटर पास करें यूआरएल

Question

हाय में मैं एक पेज से दूसरे पृष्ठ पर जाना चाहता हूं और पैरामीटर search और type पास करना चाहता हूं। क्या मैं यूआरएल में इन पैरामीटर के बिना प्रतिक्रिया राउटर के साथ इसे प्राप्त कर सकता हूं?

मैं इस https://github.com/rackt/react-router/blob/master/docs/guides/overview.md#dynamic-segments पर देख रहा हूं और <RouteHandler {...this.props}/> का उपयोग कर समाधान देख रहा हूं लेकिन जब तक मैं यूआरएल पर पैरा पास नहीं करता तब तक यह काम नहीं कर रहा है।

क्या इसके लिए कोई समाधान है?

संपादित करें 1. मार्गों:

<Route name="app" path="/" handler={App}> 
    <Route name="realestates" handler={RealEstatesPage}/> 
    <Route name="realestatesPrefiltered" path="realestatesPrefiltered/:search/:type" handler=RealEstatesPage}/> 
    <Route name="realestate" handler={RealEstateDetails}/> 
    <DefaultRoute handler={MainPage}/> 
</Route> 

Answer 1

लिंक आप का उल्लेख दो अलग अलग रणनीतियों की रूपरेखा। सबसे पहले, गतिशील सेगमेंट केवल यूआरएल पैरामीटर किए जाते हैं, जहां क्वेरी स्ट्रिंग के बजाय यूआरएल पथ के हिस्से के रूप में पैरामीटर भेजे जाते हैं। तो इन्हें सार्वजनिक रूप से दिखाई देने की आवश्यकता होगी।

दूसरा, आप प्रोप का उपयोग कर सकते हैं। "दृश्यों के पीछे" चीजों को पारित करने के लिए यह एकमात्र समर्थित विकल्प है। इसके अलावा, यह प्रतिक्रिया में पसंदीदा तरीका है। सवाल यह है कि यह कहां हो सकता है?

एक विकल्प Router.run() के भीतर से शीर्ष-स्तर पर मानों को पारित करना है। यह ऊपर दिए गए लिंक में उल्लिखित है, प्रत्येक नेस्टेड हैंडलर प्रोप को पास कर रहा है, या तो स्पष्ट रूप से <RouteHandler search={this.props.search} />, या spread attributes<RouteHandler {...props} /> जैसे थोक का उपयोग कर थोक।

चूंकि आप केवल पृष्ठों के उप-समूह के लिए ऐसा करना चाहते हैं, इसलिए आप नेस्टेड मार्गों का उपयोग कर सकते हैं, जिसमें माता-पिता मार्ग हैंडलर अपने राज्य के हिस्से के रूप में प्रश्नों के गुणों का मालिक है। इसके बाद यह उपरोक्त मामले के समान ही सामान्य प्रोप के रूप में हर बच्चे को पास कर देगा।

उदाहरण के लिए, आपका मार्ग मैप इस प्रकार दिखाई देंगे:

<Route name="app" path="/" handler={App}> 
    <Route name="realestates" handler={RealEstatesPage}/> 
    <Route name="realestatesPrefiltered" handler={RealEstatePrefiltered}> 
     <Route name="homes" handler={RealEstateHouseDetails}/> 
     <Route name="apartments" handler={RealEstateHouseDetails}/> 
     <Route name="land" handler={RealEstateLandDetails}/> 
    </Route> 
    <Route name="realestate" handler={RealEstateDetails}/> 
    <DefaultRoute handler={MainPage}/> 
</Route> 

फिर अपने RealEstatePrefiltered घटक इस प्रकार दिखाई देंगे:

RealEstatePrefiltered = React.createClass({ 
    getInitialState: function() { 
     return { search: '', type: '' }; // Update from store or event. 
    }, 
    render: function() { 
     return <div> 
      <RouteHandler search={this.state.search} type={this.state.type} /> 
     </div>; 
    } 
}); 

केवल सवाल छोड़ दिया है, तुम कैसे राज्य बदल सकता हूँ इस घटक पर? आप इसके लिए एक फ्लक्स स्टोर का उपयोग कर सकते हैं, या आप केवल एक वैश्विक घटना स्थापित कर सकते हैं और इस घटक को परिवर्तनों के लिए देख सकते हैं।