एक्सपो राउटर के साथ नेटिव रूटिंग की नए सिरे से कल्पना की गई

फ़ाइल-आधारित रूटिंग एक सामान्य वेब विकास तकनीक है जो किसी प्रोजेक्ट निर्देशिका में किसी विशिष्ट फ़ाइल के URL पथ को मैप करती है। यह सिस्टम नेविगेशन सिस्टम के निर्माण में शामिल जटिल रूटिंग कॉन्फ़िगरेशन से बचा जाता है।

एक्सपो राउटर लाइब्रेरी की रिलीज के साथ, रिएक्टिव नेटिव एप्लिकेशन के साथ फाइल-आधारित रूटिंग संभव है। एक्सपो राउटर एक्सपो के साथ काम करने वाले रिएक्टिव नेटिव डेवलपर्स के लिए एक बेहतर नेविगेशन सिस्टम हो सकता है।

एक्सपो राउटर के साथ नेविगेशन की पुनर्कल्पना

एक्सपो राउटर रिएक्टिव नेटिव एक्सपो ऐप्स के लिए एक घोषणात्मक रूटिंग समाधान प्रदान करता है। यह प्रणाली आप कैसे करेंगे उससे काफी अलग है रिएक्ट नेविगेशन का उपयोग करके एक नेविगेशन सिस्टम बनाएं. एक्सपो राउटर वर्तमान कामकाजी नेविगेशन सिस्टम का उपयोग करने के साथ प्रमुख चिंताओं को शावक करता है।

इन समस्याओं में नेविगेशन सिस्टम का होना शामिल है जो हर जगह लगातार काम नहीं करता है, डीप लिंकिंग को प्रबंधित करने में कठिनाइयाँ, और कस्टम नेविगेशन ट्रांज़िशन के लिए जटिल सेटअप भी शामिल हैं।

एक्सपो राउटर फ़ाइल-आधारित नेविगेशन/रूटिंग एक सरल प्रणाली है जो अच्छी तरह से काम करती है और जावास्क्रिप्ट डेवलपर्स और जावास्क्रिप्ट फ्रेमवर्क जैसे पहले से ही परिचित है Next.js, जहां आप मार्गों को परिभाषित कर सकते हैं.

एक्सपो राउटर की स्थापना और स्थापना

अपने एक्सपो प्रोजेक्ट को पुराने नेविगेशन सिस्टम से एक्सपो राउटर का उपयोग करने के लिए माइग्रेट करना काफी सरल है।

चरण 1: एक्सपो राउटर स्थापित करें

एक्सपो-राउटर इंस्टॉलर चलाने के लिए इस टर्मिनल कमांड का प्रयोग करें:

एनपीएक्स एक्सपो एक्सपो-राउटर स्थापित करें

आपको यह भी सुनिश्चित करना होगा कि आपने ये सहकर्मी निर्भरताएँ स्थापित की हैं:

• प्रतिक्रिया-मूल-सुरक्षित-क्षेत्र-संदर्भ
• प्रतिक्रिया-देशी-स्क्रीन
• एक्सपो-लिंकिंग
• एक्सपो-स्थिति-बार
• प्रतिक्रिया-देशी-इशारा-हैंडलर

यदि कोई गायब है, तो आप उन्हें चलाकर स्थापित कर सकते हैं:

एनपीएक्स एक्सपो इंस्टॉल करें 

चरण 2: प्रवेश बिंदु को अपडेट करें

कोई नया बनाएं index.js अपने मौजूदा को बदलने के लिए फ़ाइल ऐप.जेएस प्रवेश बिंदु और सेट करें index.js ऐप के अंदर प्रवेश बिंदु के रूप में app.json:

// प्रवेश बिंदु के रूप में index.js सेट करें
{
"मुख्य": "इंडेक्स.जेएस"
}
// निम्नलिखित को index.js के अंदर आयात करें
आयात"एक्सपो-राउटर/एंट्री";

एक्सपो राउटर उपयोग करता है a गहरा लिंक रूटिंग के दौरान कौन सी स्क्रीन या सामग्री खोलनी है, यह निर्धारित करने की योजना।

एक जोड़कर अपने ऐप के लिए डीप लिंकिंग योजना परिभाषित करें योजना संपत्ति को app.json:

{
"एक्सपो": {
"योजना": "myapp"
 }
}

चरण 4: अंतिम विन्यास

अंतिम चरण अपने एक्सपो ऐप के मेट्रो बंडलर को सेट करना और अपने ऐप में एक्सपो राउटर का समर्थन करने के लिए बैबेल को कॉन्फ़िगर करना है।

अंदर बेबल.कॉन्फिग.जेएस इस तरह दिखने के लिए मौजूदा कोड को संशोधित करें:

मापांकनिर्यात = समारोह (एपीआई) {
 एपीआई.कैश (सत्य);
वापस करना {
 प्रीसेट: ["बेबेल-प्रीसेट-एक्सपो"],
 प्लगइन्स: [
ज़रूरत होना।संकल्प("एक्सपो-राउटर/बेबेल"),
/* */
 ],
 };
};

अब पुनर्निर्माण करें और चलाकर अपना ऐप शुरू करें:

एनपीएक्स एक्सपो --clear

एक्सपो राउटर के साथ अपने ऐप के रूट बनाना

आप के भीतर एक नेविगेशन प्रवाह सेट करना शुरू कर सकते हैं अनुप्रयोग फ़ोल्डर। index.js फ़ाइल आपका शुरुआती बिंदु है। एक्सपो राउटर आपके द्वारा बनाई गई प्रत्येक फ़ाइल का पथ जोड़ता है अनुप्रयोग प्रत्येक पृष्ठ से मिलान करने के लिए URL डीप लिंक के साथ ऐप के रूट सिस्टम में।

उदाहरण के लिए, एक बनाएँ सेकेंडस्क्रीन.जेएस फ़ाइल के अंदर अनुप्रयोग निर्देशिका और एक डिफ़ॉल्ट घटक निर्यात करें:

आयात {स्टाइलशीट, टेक्स्ट, व्यू} से"प्रतिक्रिया-मूल";
आयात प्रतिक्रिया से"प्रतिक्रिया";
कॉन्स्ट दूसरी स्क्रीन = () => {
वापस करना (


दूसरी स्क्रीन</Text>
 </View>
 </View>
 );
};
निर्यातगलती करना दूसरी स्क्रीन;
कॉन्स्ट शैलियाँ = StyleSheet.create ({});

आप से इस स्क्रीन पर नेविगेट कर सकते हैं index.js साथ राउटर () का उपयोग करें तरीका:

आयात {यूज़ राउटर} से"एक्सपो-राउटर";
निर्यातगलती करनासमारोहपृष्ठ() {
कॉन्स्ट नेविगेशन = राउटर () का उपयोग करें;
वापस करना (

हेलो वर्ल्ड</Text>
यह पहला पन्ना है का आपका ऐप। </Text>
 शीर्षक ="दूसरी स्क्रीन पर नेविगेट करें"
 ऑनप्रेस = {() => {
 नेविगेशन.पुश ("/ सेकंडस्क्रीन");
 }}
 />
 </View>
 );
}

यहां आप राउटर को नेविगेशन के लिए असाइन करते हैं और कॉल करके बटन एलिमेंट के अंदर इसका इस्तेमाल करते हैं नेविगेशन.पुश ("/ सेकंड"). पुश के भीतर का तर्क उस स्क्रीन का फ़ाइल पथ है जिस पर आप नेविगेट करना चाहते हैं।

अंदर दूसरी स्क्रीन आप इस तरह इंडेक्स स्क्रीन पर भी नेविगेट कर सकते हैं:

आयात { जोड़ना } से"एक्सपो-राउटर";
कॉन्स्ट दूसरी स्क्रीन = () => {
वापस करना (


दूसरी स्क्रीन</Text>
"/" बच्चे के रूप में>

index.js< पर नेविगेट करें/Text>
 </TouchableOpacity>
 </Link>
 </View>
 </View>
 );
};

पथ निर्दिष्ट करने के लिए लिंक तत्व एक href प्रोप लेता है। ऐप के अंदर, "/" पथ प्रविष्टि फ़ाइल (index.js) से मेल खाता है। दूसरा सहारा चाइल्ड है। यह प्रोप आपको डिफ़ॉल्ट लिंक घटक के बजाय सभी निर्दिष्ट प्रॉप्स के साथ पहले चाइल्ड कंपोनेंट को रेंडर करने की अनुमति देता है। आप इसका उपयोग लिंक घटक के रूप को अनुकूलित करने या कस्टम रूटिंग लॉजिक को लागू करने के लिए कर सकते हैं।

गतिशील मार्गों को परिभाषित करना

गतिशील मार्गों के साथ, आप कुछ मापदंडों या डेटा के आधार पर गतिशील रूप से मार्ग उत्पन्न कर सकते हैं। मार्गों के एक निश्चित सेट को परिभाषित करने के बजाय, आप अपने ऐप के नेविगेशन में लचीलापन और अनुकूलता प्राप्त करते हैं।

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

उदाहरण के लिए, एक ब्लॉगिंग ऐप पर विचार करें जहाँ आप अलग-अलग ब्लॉग पोस्ट प्रदर्शित करना चाहते हैं। आप प्रत्येक ब्लॉग पोस्ट को संभालने के लिए एक गतिशील मार्ग को परिभाषित कर सकते हैं:

// ऐप/रूट्स/ब्लॉगपोस्ट.जेएस
आयात प्रतिक्रिया से"प्रतिक्रिया";
आयात {यूज़ राउटर} से"एक्सपो-राउटर";
कॉन्स्ट ब्लॉगपोस्ट = ({ मार्ग }) => {
कॉन्स्ट {postId} = मार्ग.परम;
वापस करना (

ब्लॉग पोस्ट प्रदर्शित करना साथ आईडी: {postId}</Text>
 </View>
 );
};
निर्यातगलती करना ब्लॉग भेजा;

इस उदाहरण में, आप नामित एक गतिशील मार्ग घटक को परिभाषित करते हैं ब्लॉग भेजा. मार्ग.परम ऑब्जेक्ट आपको मार्ग में पारित पैरामीटर मानों तक पहुंचने की अनुमति देता है। इस मामले में, आप एक का उपयोग कर रहे हैं पोस्ट आईडी संबंधित ब्लॉग पोस्ट प्रदर्शित करने के लिए पैरामीटर।

गतिशील मार्ग उत्पन्न करना

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

यहाँ एक उदाहरण है:

// ऐप/कंपोनेंट्स/ब्लॉगलिस्ट.जेएस
आयात प्रतिक्रिया से"प्रतिक्रिया";
आयात {उपयोग नेविगेशन} से"एक्सपो-राउटर";
कॉन्स्ट ब्लॉग सूची = ({ वेबदैनिकी डाक }) => {
कॉन्स्ट नेविगेशन = नेविगेशन का उपयोग करें ();
कॉन्स्ट नेविगेट टूब्लॉगपोस्ट = (पोस्ट आईडी) => {
 नेविगेशन.नेविगेट ("ब्लॉग भेजा", {पोस्टआईड});
 };
वापस करना (

 {blogPosts.map((डाक) => (
 कुंजी = {post.id}
 ऑनप्रेस = {() => नेविगेट टूब्लॉगपोस्ट (पोस्ट.आईडी)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
निर्यातगलती करना ब्लॉग सूची;

इस उदाहरण में, आप पर पुनरावृति करते हैं वेबदैनिकी डाक सरणी और रेंडर ए प्रत्येक पद के लिए घटक। जब आप कोई पोस्ट दबाते हैं, तो NavigateToBlogPost समारोह चलता है, गुजर रहा है पोस्ट आईडी नेविगेशन मार्ग के लिए।

गतिशील मार्गों को संभालना

आप डायनेमिक रूट के लिए विशिष्ट नेविगेशन इवेंट्स का उपयोग करके सुन सकते हैं useFocusEffect अंकुश।

उदाहरण के लिए:

// ऐप/रूट्स/ब्लॉगपोस्ट.जेएस
आयात प्रतिक्रिया से"प्रतिक्रिया";
आयात {मार्ग, फोकस प्रभाव का प्रयोग करें} से"एक्सपो-राउटर";
कॉन्स्ट ब्लॉगपोस्ट = ({ मार्ग }) => {
कॉन्स्ट {postId} = मार्ग.परम;
 फोकस प्रभाव का प्रयोग करें (() => {
// पोस्टआईड के आधार पर ब्लॉग पोस्ट डेटा प्राप्त करें
// फोकस पर कोई अन्य आवश्यक क्रियाएं करें
 });
वापस करना (

ब्लॉग पोस्ट प्रदर्शित करना साथ आईडी: {postId}</Text>
 </View>
 );
};
निर्यातगलती करना ब्लॉग भेजा;

इस उदाहरण में, useFocusEffect हुक विशिष्ट फोकस घटनाओं के लिए सुनता है ब्लॉग भेजा अवयव। कॉलबैक के अंदर, आप केंद्रित ब्लॉग पोस्ट के आधार पर अतिरिक्त डेटा प्राप्त कर सकते हैं, क्रियाएं कर सकते हैं या स्क्रीन को अपडेट कर सकते हैं।

गतिशील मार्गों के साथ नेविगेट करना

डायनेमिक रूट पर नेविगेट करने के लिए, आप एक्सपो राउटर द्वारा प्रदान की गई नेविगेशन विधियों का उपयोग कर सकते हैं।

उदाहरण के लिए, नेविगेट करने के लिए ब्लॉग भेजा एक विशिष्ट के साथ घटक पोस्ट आईडी, आप उपयोग कर सकते हैं नेविगेशन.नेविगेट तरीका:

// ऐप/कंपोनेंट्स/ब्लॉगलिस्ट.जेएस
आयात प्रतिक्रिया से"प्रतिक्रिया";
आयात {उपयोग नेविगेशन} से"एक्सपो-राउटर";
कॉन्स्ट ब्लॉग सूची = ({ वेबदैनिकी डाक }) => {
कॉन्स्ट नेविगेशन = नेविगेशन का उपयोग करें ();
कॉन्स्ट नेविगेट टूब्लॉगपोस्ट = (पोस्ट आईडी) => {
 नेविगेशन.नेविगेट ("ब्लॉग भेजा", {पोस्टआईड});
 };
वापस करना (

 {blogPosts.map((डाक) => (
 कुंजी = {post.id}
 ऑनप्रेस = {() => नेविगेट टूब्लॉगपोस्ट (पोस्ट.आईडी)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
निर्यातगलती करना ब्लॉग सूची;

जब आप किसी ब्लॉग पोस्ट को दबाते हैं, तो NavigateToBlogPost फ़ंक्शन के साथ आग लग जाएगी पोस्ट आईडी.

एक्सपो राउटर आपको अपने नेटिव ऐप्स की संरचना करने में मदद करता है

एक्सपो राउटर आपके रिएक्टिव नेटिव ऐप्स में नेविगेशन के प्रबंधन के लिए एक उत्कृष्ट समाधान प्रदान करता है। मूल रूटिंग अनुभव की फिर से कल्पना करके, एक्सपो राउटर लचीलापन और उपयोग में आसानी प्रदान करता है।

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