React Native Academy · Lektion

Konfigurera deep linking i React Navigation

Konfigurera egenskapen linking på NavigationContainer med en skärmkarta så att React Navigation automatiskt navigerar till rätt skärm när en deep link öppnas.

Lektion 3 av 413 steg

Konfigurera deep linking i React Navigation är en gratis lektion i React Native Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för React Native Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Native Academy innehåller totalt 4 lektioner.

Inbyggd deep linking i React Navigation

React Navigation har inbyggt stöd för deep linking via en linking-prop på NavigationContainer. När den är konfigurerad hanterar React Navigation automatiskt både URL:er vid kallstart och vid varmstart genom att matcha dem mot en skärmkarta och navigera till motsvarande skärm — du behöver inte skriva kod för URL-tolkning eller Linking API manuellt.

Detta deklarativa tillvägagångssätt är betydligt mindre felbenäget än manuell URL-hantering och integreras sömlöst med navigeringsbibliotekets tillståndshantering.

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-propen: prefixes och config

Propen linking har två huvudfält: prefixes (en array med URL-prefix som ska hanteras) och config (skärmkartan). Arrayen prefixes anger för React Navigation vilka URL-scheman som ska fångas upp. Du kan inkludera både ditt anpassade schema och din HTTPS-domän för universella länkar.

Objektet config.screens mappar skärmkomponenternas namn till URL-sökvägsmönster. URL-sökvägen efter prefixet matchas mot dessa mönster för att avgöra vilken skärm som ska visas.

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
    },
  },
};

Sökvägsparametrar och frågesträngar

URL-sökvägsparametrar definieras med ett kolonprefix, till exempel :userId. När en URL matchar extraheras parametern automatiskt och skickas som en route-parameter till skärmkomponenten. Parametrar i frågesträngen analyseras också automatiskt och läggs till bland route-parametrarna.

Till exempel matchar myapp://profile/123?tab=posts profile/:userId, och skärmen tar emot route.params = { userId: '123', tab: 'posts' }. Ingen manuell URL-tolkning behövs.

// 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'
}

Konfiguration av nästlade navigatorer

När skärmar finns inuti nästlade navigatorer, till exempel en tabbnavigator med stackar på varje flik, måste skärmkartan återspegla nästlingen. Använd en screens-nyckel inuti den överordnade skärmens config för att definiera sökvägar till nästlade skärmar.

React Navigation hanterar navigeringstillståndet korrekt — hela stacken som krävs för att nå den djupt nästlade skärmen skapas, inklusive eventuella överordnade navigatorer som först måste initieras.

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',
            },
          },
        },
      },
    },
  },
};

Exakt sökvägsmatchning

Som standard använder React Navigation prefixmatchning för sökvägar. Lägg till exact: true i en skärms config för att i stället kräva en exakt sökvägsmatchning. Exakt matchning är viktig när sökvägar delvis kan matcha flera skärmar.

Utan exakt matchning skulle till exempel mönstret post matcha myapp://post och även myapp://post-list. Med exact: true matchas endast den exakta sökvägen.

const linking = {
  prefixes: ['myapp://'],
  config: {
    screens: {
      PostList: {
        path: 'post',
        exact: true,  // only matches exactly myapp://post
      },
      PostDetail: 'post/:id', // matches myapp://post/123
    },
  },
};

Anpassade parse- och stringify-funktioner

Linking-konfigurationen accepterar också funktionerna parse och stringify per skärm för att omvandla route-parametrar innan de skickas till komponenten. parse omvandlar URL-parametersträngar till rätt typer, till exempel strängen '123' till talet 123. stringify omvandlar parametrar tillbaka till URL-strängar när länkar skapas.

Med dessa funktioner får du full kontroll över parameteromvandlingen utan att behöva implementera URL-tolkningen själv.

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 och getStateFromPath

React Navigation tillhandahåller verktygen getPathFromState och getStateFromPath för att omvandla navigeringstillståndsobjekt till URL-sökvägssträngar och vice versa. De är användbara när du vill skapa delbara deep links från det aktuella navigeringstillståndet och för anpassad återställning av tillstånd.

getPathFromState(state, config) returnerar en URL-sökväg för det aktuella navigeringstillståndet. getStateFromPath(path, config) returnerar ett navigeringstillstånd för en given URL. Båda kräver samma config-objekt som används i linking-propen.

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' } }] }

Aktivera deep links i Expo (Expo Go)

När du kör i Expo Go under utvecklingen använder appens deep link-URL schemat exp:// tillsammans med Expo Go-värden. React Navigation hanterar detta automatiskt när du inkluderar Linking.createURL('') i arrayen prefixes, med paketet expo-linking. Det löses då till rätt prefix för både Expo Go och produktionsbyggen.

Det innebär att din deep link-konfiguration fungerar både under utveckling (Expo Go) och i produktion (appens anpassade schema) utan några ändringar i konfigurationen.

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',
    },
  },
};

Skapa deep links programmatiskt

Använd Linking.createURL(path, options) från expo-linking för att skapa deep link-URL:er som fungerar både under utveckling och i produktion. Skicka med frågeparametrar i alternativet queryParams. Använd de skapade URL:erna i aviseringar, delningspaneler och e-postkampanjer.

Detta är säkrare än att hårdkoda schema-URL:er, eftersom createURL automatiskt skapar rätt prefix för den aktuella körningsmiljön.

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 });

Testa linking-konfigurationen

React Navigation tillhandahåller ett felsökningsverktyg för linking — ange linking.enabled: 'auto', så loggar biblioteket URL-matchningsresultat till konsolen under utveckling. Detta hjälper dig att diagnostisera varför en URL inte navigerar till den förväntade skärmen.

För omfattande testning kan du skriva en testfunktion som anropar getStateFromPath med var och en av dina förväntade deep link-URL:er och verifierar att det resulterande navigeringstillståndet är korrekt. På så sätt upptäcks konfigurationsfel innan de når användarna.

// 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);
});

Skärm för ogiltiga länkar

Konfigurera en reservskärm för URL:er som inte matchar något definierat mönster. Lägg till en NotFound-skärm i linking-konfigurationen och ange den som reservskärm. Detta är viktigt eftersom deep links från tredje part kan använda felaktiga sökvägar. Du bör därför visa ett användbart meddelande på ett smidigt sätt i stället för att appen kraschar eller misslyckas utan någon indikation.

Skärmen för ogiltiga länkar bör förklara att länken inte längre är giltig, erbjuda ett sätt att navigera till startskärmen och eventuellt logga den ogiltiga URL:en för analys.

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>
  );
}

Snabb kontroll

Testa dina kunskaper om React Native Mobile Development-koncepten från den här lektionen.

Besvara frågan i den interaktiva lektionen

Sammanfattning av lektionen

I den här lektionen har du lärt dig: linking-propen på NavigationContainer hanterar automatiskt deep link-tolkning och navigering med hjälp av en deklarativ skärmkarta, nästlade navigatorer stöds genom att nästla screen-konfigurationer i överordnade screen-konfigurationer, och ExpoLinking.createURL skapar miljöanpassade deep links som fungerar både i Expo Go och i produktionsbyggen. Härnäst konfigurerar vi universella länkar med HTTPS-URL:er och Apple App Site Association samt Android App Links.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 30
Lektioner: 120

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Konfigurera deep linking i React Navigation” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen React Native Academy, inklusive ”Konfigurera deep linking i React Navigation”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i React Native Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Konfigurera deep linking i React Navigation”?

Konfigurera egenskapen linking på NavigationContainer med en skärmkarta så att React Navigation automatiskt navigerar till rätt skärm när en deep link öppnas. Ni övar på React Native Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Native Academy?

Du behöver inga förkunskaper. Utbildningen i React Native Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Konfigurera deep linking i React Navigation”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Native Academy-lektionen?

Ja. Varje React Native Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Konfigurera anpassade URL-scheman
Linking API och URL-tolkning
Konfigurera deep linking i React Navigation
Universal Links (HTTPS-deep links) på iOS och Android

← Tillbaka till React Native Academy