प्रतिक्रिया राउटर - टैब जैसी नेविगेशन कैसे प्राप्त करें?

Question

मैं प्रतिक्रिया का उपयोग कर अपने पहले आवेदन को प्रतिक्रिया देने और विकसित करने के लिए नया हूं। मेरे एप्लिकेशन में 4 टैब के साथ एक टैब घटक था, और प्रत्येक टैब की सामग्री को एक अलग घटक के रूप में स्थापित किया गया था। अब मैं टैब को 4 अलग-अलग मार्गों से बदल रहा हूं। इसलिए, मैंने टैब से छुटकारा पा लिया और 4 मार्गों को स्थापित करने के लिए प्रतिक्रिया-राउटर का इस्तेमाल किया, प्रत्येक 4 घटकों में से प्रत्येक के लिए।

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

हालांकि, मैं मार्गों के साथ इस व्यवहार को प्राप्त करने में सक्षम नहीं हूं। मैंने देखा कि जब मैं एक मार्ग से दूसरे मार्ग पर नेविगेट करता हूं, तो घटकों को फिर से चालू किया जाता है (न केवल पुनः प्रस्तुत किया जाता है)। मैं इसे बता सकता हूं क्योंकि घटक के कन्स्ट्रक्टर को हर बार घटक के लिए रूट सक्रिय होने के लिए बुलाया जाता है।

मैं टैब-जैसे व्यवहार प्राप्त करना चाहता हूं। मुझे पता है कि कोणीय के लिए एक यूआई-राउटर-एक्स्ट्रा लाइब्रेरी है जो दीप स्टेट रीडायरेक्ट (टैब जैसी नेविगेशन के लिए) प्रदान करती है। यह मेरे कोणीय परियोजना में वास्तव में अच्छी तरह से काम करता है। लेकिन मुझे प्रतिक्रिया के लिए एक समान विकल्प नहीं मिल रहा है। मैंने प्रतिक्रिया-राउटर और प्रतिक्रिया-राउटर-घटक की कोशिश की है और दोनों मार्ग सक्रिय होने पर एक घटक को फिर से चालू कर देते हैं।

क्या प्रतिक्रिया में मार्गों के लिए टैब-जैसे व्यवहार प्राप्त करने का कोई समाधान है?

Answer 1

व्यक्तिगत रूप से, मैंने इस मामले में प्रतिक्रिया-राउटर को मिटाना चुना और वर्तमान टैब को प्रदर्शित करने के लिए वर्तमान टैब युक्त एक मूल घटक बना दिया, जबकि केवल सक्रिय प्रदर्शित किया गया।

यहाँ एक बहुत ही सरल उदाहरण

<div 
     style={{display: this.state.currentTab === 'component_a' ? 'block' : 'none'}} 
    > 
     <ComponentA /> 
    </div> 
    <div 
     style={{display: this.state.currentTab === 'component_b' ? 'block' : 'none'}} 
    > 
     <ComponentB /> 
    </div> 

Answer 2

है आपके पास दो विकल्प, टैब के आधार पर Redux, या दिखाने/छिपाने घटकों का उपयोग करें।

यहाँ एक उदाहरण है दिखाने/छिपाने घटकों

{this.state.showAboutMe ? <AboutMeComponent navigation={this.props.navigation} props={this.props.user} /> : undefined}