In this lesson, you will learn how to route users directly to a specific component view when they click a link from an external source, like an email or a website.
What is Deep Linking?
Normally, when a user opens your app, they start at the home screen. A deep link acts like a shortcut; instead of opening the app to the front door, it tells the app to go straight to a specific "room" (a component).
To handle this, we use a linking configuration object. This tells your app, "If you see a URL that looks like myapp://profile/123, please take the user to the Profile screen and pass 123 as a parameter."
How it Works
Think of your app's navigation as a map. Deep linking is the coordinate system that points to a specific spot on that map. When an external trigger (like an email link) hits your app, the operating system passes the URL to React Native. Your app then parses that URL and tells the navigator which screen to render.
Here is a simplified example of how you configure these paths:
const linking = {
prefixes: ['myapp://'],
config: {
screens: {
Home: 'home',
Profile: 'profile/:id', // The ':id' becomes a prop for your screen
},
},
};
// You pass this 'linking' object to your NavigationContainer
<NavigationContainer linking={linking}>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>
</NavigationContainer>
Why it Matters
Without deep links, your users are forced to manually navigate through your app to find content they already clicked on elsewhere. By implementing deep links, you bridge the gap between your web presence (or notifications) and your app's internal content, creating a seamless transition. When the user taps a link, the ProfileScreen will receive the id automatically, allowing it to fetch and display the correct data immediately.
Key Takeaway: Deep linking turns your app into a navigable destination where specific components can be opened directly via URL patterns.