React Navigation डीप लिंक कॉन्फ़िगरेशन
स्क्रीन मैप के साथ NavigationContainer पर linking प्रॉप कॉन्फ़िगर करें, ताकि डीप लिंक खुलने पर React Navigation अपने-आप सही स्क्रीन पर जाए।
React Navigation डीप लिंक कॉन्फ़िगरेशन, CoddyKit पर React Native Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह React Native Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
React Navigation की अंतर्निहित डीप लिंकिंग
React Navigation, NavigationContainer पर दिए गए linking प्रॉप के माध्यम से अंतर्निहित डीप लिंकिंग सहायता प्रदान करता है। कॉन्फ़िगर किए जाने पर React Navigation, स्क्रीन मानचित्र के आधार पर उनका विश्लेषण करके कोल्ड-स्टार्ट और वार्म-स्टार्ट—दोनों प्रकार के URL अपने-आप संभालता है और संबंधित स्क्रीन पर ले जाता है—आपको URL पार्स करने या Linking API का कोड स्वयं लिखने की आवश्यकता नहीं होती।
यह घोषणात्मक तरीका मैन्युअल URL प्रबंधन की तुलना में त्रुटियों की संभावना को बहुत कम करता है और नेविगेशन लाइब्रेरी के स्थिति प्रबंधन के साथ सहज रूप से एकीकृत हो जाता है।
import { NavigationContainer } from '@react-navigation/native';
const linking = {
prefixes: ['myapp://'],
config: {
screens: {
Home: 'home',
Profile: 'profile/:userId',
Settings: 'settings',
},
},
};
<NavigationContainer linking={linking}>
<RootNavigator />
</NavigationContainer>linking प्रॉप: prefixes और config
linking प्रॉप में दो मुख्य फ़ील्ड होते हैं: prefixes (संभाले जाने वाले URL प्रीफ़िक्स की एक सरणी) और config (स्क्रीन मानचित्र)। prefixes सरणी React Navigation को बताती है कि किन URL स्कीम को इंटरसेप्ट करना है। आप यूनिवर्सल लिंक के लिए अपनी कस्टम स्कीम और HTTPS डोमेन—दोनों शामिल कर सकते हैं।
config.screens ऑब्जेक्ट स्क्रीन घटक के नामों को URL पाथ पैटर्न से मैप करता है। प्रीफ़िक्स के बाद वाले URL पाथ का इन पैटर्न से मिलान करके यह तय किया जाता है कि किस स्क्रीन पर जाना है।
const linking = {
prefixes: [
'myapp://',
'https://www.myapp.com', // universal links too
'https://myapp.com',
],
config: {
screens: {
Home: '', // matches myapp:// (empty path)
Profile: 'profile/:userId', // myapp://profile/123
Product: 'product/:id', // myapp://product/abc
Settings: 'settings', // myapp://settings
},
},
};पाथ पैरामीटर और क्वेरी स्ट्रिंग
URL पाथ पैरामीटर को :userId जैसे कोलन प्रीफ़िक्स के साथ परिभाषित किया जाता है। URL का मिलान होने पर पैरामीटर अपने-आप निकाला जाता है और स्क्रीन घटक को रूट पैरामीटर के रूप में दिया जाता है। क्वेरी स्ट्रिंग पैरामीटर भी अपने-आप पार्स होकर रूट पैरामीटर में जोड़ दिए जाते हैं।
उदाहरण के लिए, myapp://profile/123?tab=posts, profile/:userId से मेल खाता है और स्क्रीन को route.params = { userId: '123', tab: 'posts' } प्राप्त होता है। URL को मैन्युअल रूप से पार्स करने की आवश्यकता नहीं होती।
// URL: myapp://profile/123?tab=posts
// Matches: profile/:userId
// Screen receives:
// route.params = { userId: '123', tab: 'posts' }
function ProfileScreen({ route }) {
const { userId, tab } = route.params;
// userId = '123', tab = 'posts'
}नेस्टेड नेविगेटर का कॉन्फ़िगरेशन
जब स्क्रीन नेस्टेड नेविगेटर के अंदर हों (जैसे, हर टैब में स्टैक वाले टैब नेविगेटर में), तो स्क्रीन मानचित्र में नेस्टिंग संरचना दिखाई देनी चाहिए। नेस्टेड स्क्रीन के पाथ निर्धारित करने के लिए पैरेंट स्क्रीन के config के अंदर screens कुंजी का उपयोग करें।
React Navigation नेविगेशन स्थिति को सही ढंग से संभालता है—यह गहराई में स्थित स्क्रीन तक पहुँचने के लिए आवश्यक पूरा स्टैक तैयार करता है, जिसमें पहले प्रारंभ किए जाने वाले पैरेंट नेविगेटर भी शामिल होते हैं।
const linking = {
prefixes: ['myapp://'],
config: {
screens: {
Tabs: { // bottom tab navigator
screens: {
HomeTab: { // home tab stack
screens: {
Home: 'home',
PostDetail: 'post/:postId',
},
},
ProfileTab: { // profile tab stack
screens: {
Profile: 'profile/:userId',
},
},
},
},
},
},
};सटीक पाथ मिलान
डिफ़ॉल्ट रूप से React Navigation पाथ पर प्रीफ़िक्स मिलान करता है। इसके बजाय सटीक पाथ मिलान आवश्यक करने के लिए स्क्रीन config में exact: true जोड़ें। जब पाथ आंशिक रूप से एक से अधिक स्क्रीन से मेल खा सकते हों, तब सटीक मिलान महत्वपूर्ण होता है।
उदाहरण के लिए, सटीक मिलान के बिना post पैटर्न myapp://post और myapp://post-list—दोनों से मेल खाएगा। exact: true के साथ केवल बिल्कुल वही पाथ मेल खाएगा।
const linking = {
prefixes: ['myapp://'],
config: {
screens: {
PostList: {
path: 'post',
exact: true, // only matches exactly myapp://post
},
PostDetail: 'post/:id', // matches myapp://post/123
},
},
};कस्टम पार्स और स्ट्रिंगिफ़ाई फ़ंक्शन
linking config, प्रत्येक स्क्रीन के लिए parse और stringify फ़ंक्शन भी स्वीकार करता है, जो घटक को देने से पहले रूट पैरामीटर में रूपांतरण करते हैं। parse URL पैरामीटर स्ट्रिंग को सही प्रकार में बदलता है (जैसे, स्ट्रिंग '123' को संख्या 123 में)। stringify लिंक बनाने के लिए पैरामीटर को वापस URL स्ट्रिंग में बदलता है।
इन फ़ंक्शन से पैरामीटर रूपांतरण पर पूरा नियंत्रण मिलता है और आपको URL पार्सिंग स्वयं लागू करने की आवश्यकता नहीं पड़ती।
const linking = {
prefixes: ['myapp://'],
config: {
screens: {
Profile: {
path: 'profile/:userId',
parse: {
userId: (id) => Number(id), // string to number
},
stringify: {
userId: (id) => String(id), // number back to string
},
},
},
},
};getPathFromState और getStateFromPath
React Navigation, getPathFromState और getStateFromPath उपयोगिताएँ प्रदान करता है, जो नेविगेशन स्थिति ऑब्जेक्ट और URL पाथ स्ट्रिंग के बीच रूपांतरण करती हैं। ये वर्तमान नेविगेशन स्थिति से साझा किए जा सकने वाले डीप लिंक बनाने और कस्टम स्थिति पुनर्स्थापन तर्क के लिए उपयोगी हैं।
getPathFromState(state, config) वर्तमान नेविगेशन स्थिति के लिए URL पाथ लौटाता है। getStateFromPath(path, config) दिए गए URL के लिए नेविगेशन स्थिति लौटाता है। दोनों के लिए linking प्रॉप में उपयोग किए गए उसी config ऑब्जेक्ट की आवश्यकता होती है।
import { getPathFromState, getStateFromPath } from '@react-navigation/native';
// Generate a shareable link for the current screen:
const currentState = navigationRef.current.getRootState();
const path = getPathFromState(currentState, linking.config);
const shareUrl = 'myapp://' + path;
// shareUrl = 'myapp://profile/123'
// Parse a URL to a navigation state:
const state = getStateFromPath('profile/123', linking.config);
// state = { routes: [{ name: 'Profile', params: { userId: '123' } }] }Expo में डीप लिंक सक्षम करना (Expo Go)
विकास के दौरान Expo Go में चलाते समय, आपके ऐप का डीप लिंक URL Expo Go होस्ट के साथ exp:// स्कीम का उपयोग करता है। जब आप prefixes सरणी में Linking.createURL('') शामिल करते हैं (expo-linking पैकेज का उपयोग करके), तो React Navigation इसे अपने-आप संभालता है। यह Expo Go और प्रोडक्शन बिल्ड—दोनों के लिए सही प्रीफ़िक्स निर्धारित करता है।
इसका अर्थ है कि आपका डीप लिंक config, config में किसी बदलाव के बिना विकास (Expo Go) और प्रोडक्शन (आपके ऐप की कस्टम स्कीम)—दोनों में काम करता है।
import * as ExpoLinking from 'expo-linking';
const linking = {
prefixes: [
ExpoLinking.createURL('/'), // works in Expo Go AND production
'myapp://',
'https://www.myapp.com',
],
config: {
screens: {
Home: '',
Profile: 'profile/:userId',
},
},
};प्रोग्राम के माध्यम से डीप लिंक बनाना
विकास और प्रोडक्शन—दोनों में काम करने वाले डीप लिंक URL बनाने के लिए expo-linking से Linking.createURL(path, options) का उपयोग करें। क्वेरी पैरामीटर queryParams विकल्प में दें। बनाए गए URL का उपयोग सूचनाओं, शेयर शीट और ईमेल अभियानों में करें।
यह तरीका स्कीम URL को सीधे कोड में लिखने से अधिक सुरक्षित है, क्योंकि createURL वर्तमान रनटाइम परिवेश के लिए सही प्रीफ़िक्स अपने-आप तैयार करता है।
import * as ExpoLinking from 'expo-linking';
// Generate a profile deep link:
const profileLink = ExpoLinking.createURL('profile/123', {
queryParams: { tab: 'posts', source: 'share_button' },
});
// In production: 'myapp://profile/123?tab=posts&source=share_button'
// In Expo Go: 'exp://127.0.0.1:19000/--/profile/123?tab=posts...'
await Share.share({ url: profileLink });linking कॉन्फ़िगरेशन का परीक्षण
React Navigation एक linking डीबग टूल प्रदान करता है—linking.enabled: 'auto' सेट करें और लाइब्रेरी विकास के दौरान URL मिलान के परिणाम कंसोल में दर्ज करेगी। इससे यह पता लगाने में सहायता मिलती है कि कोई URL अपेक्षित स्क्रीन पर क्यों नहीं जा रहा है।
व्यापक परीक्षण के लिए, एक परीक्षण फ़ंक्शन लिखें जो आपकी प्रत्येक अपेक्षित डीप लिंक URL के साथ getStateFromPath को कॉल करे और सुनिश्चित करे कि प्राप्त नेविगेशन स्थिति सही है। इससे कॉन्फ़िगरेशन की त्रुटियाँ उपयोगकर्ताओं तक पहुँचने से पहले ही पकड़ में आ जाती हैं।
// Test your linking config:
import { getStateFromPath } from '@react-navigation/native';
const testCases = [
{ url: 'profile/123', expected: 'Profile' },
{ url: 'product/abc', expected: 'Product' },
{ url: 'settings', expected: 'Settings' },
];
testCases.forEach(({ url, expected }) => {
const state = getStateFromPath(url, linking.config);
const routeName = state.routes[0].name;
console.assert(routeName === expected, 'Mismatch for ' + url);
});अमान्य लिंक के लिए Not Found स्क्रीन
ऐसे URL के लिए एक फ़ॉलबैक स्क्रीन कॉन्फ़िगर करें जो किसी परिभाषित पैटर्न से मेल नहीं खाते। linking config में NotFound स्क्रीन जोड़ें और उसे फ़ॉलबैक के रूप में सेट करें। यह महत्वपूर्ण है, क्योंकि तृतीय-पक्षों से आने वाले डीप लिंक में गलत पाथ हो सकते हैं। ऐप के क्रैश होने या बिना किसी सूचना के विफल होने के बजाय आपको उपयोगी संदेश शालीनता से दिखाना चाहिए।
न मिलने वाली स्क्रीन को समझाना चाहिए कि लिंक अब मान्य नहीं है, होम स्क्रीन पर जाने का तरीका देना चाहिए और, वैकल्पिक रूप से, विश्लेषण के लिए अमान्य URL को दर्ज करना चाहिए।
const linking = {
prefixes: ['myapp://'],
config: {
screens: {
Home: '',
Profile: 'profile/:userId',
NotFound: '*', // catch-all for unmatched paths
},
},
};
function NotFoundScreen() {
const navigation = useNavigation();
return (
<View>
<Text>This link is no longer valid.</Text>
<Button
title='Go Home'
onPress={() => navigation.replace('Home')}
/>
</View>
);
}त्वरित जाँच
इस पाठ में React Native Mobile Development की अवधारणाओं से अपनी समझ जाँचें।
पाठ का पुनरावलोकन
इस पाठ में आपने सीखा: NavigationContainer का linking प्रॉप घोषणात्मक स्क्रीन मानचित्र का उपयोग करके डीप लिंक पार्सिंग और नेविगेशन को अपने-आप संभालता है, पैरेंट स्क्रीन config के अंदर screens config को नेस्ट करके नेस्टेड नेविगेटर का समर्थन किया जाता है, और ExpoLinking.createURL ऐसे डीप लिंक बनाता है जो परिवेश के अनुसार काम करते हैं और Expo Go तथा प्रोडक्शन बिल्ड—दोनों में चलते हैं। आगे हम Apple App Site Association और Android App Links के साथ HTTPS URL का उपयोग करके यूनिवर्सल लिंक कॉन्फ़िगर करेंगे।
एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “React Navigation डीप लिंक कॉन्फ़िगरेशन” पाठ निःशुल्क है?
हाँ — React Native Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “React Navigation डीप लिंक कॉन्फ़िगरेशन” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“React Navigation डीप लिंक कॉन्फ़िगरेशन” में मैं क्या सीखूँगा?
स्क्रीन मैप के साथ NavigationContainer पर linking प्रॉप कॉन्फ़िगर करें, ताकि डीप लिंक खुलने पर React Navigation अपने-आप सही स्क्रीन पर जाए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Native Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या React Native Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Native Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।
“React Navigation डीप लिंक कॉन्फ़िगरेशन” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस React Native Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर React Native Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- कस्टम URL स्कीम कॉन्फ़िगर करना
- Linking API और URL पार्स करना
- React Navigation डीप लिंक कॉन्फ़िगरेशन
- iOS और Android पर Universal Links (HTTPS Deep Links)