React Native Academy · Lektion

Linking-API og URL-parsing

Brug Linking-API'et til at lytte efter indgående URL'er, mens appen kører, analysér URL'ens sti og forespørgselsparametre, og afsend en navigationshandling.

Lektion 2 af 413 trin

Linking-API og URL-parsing er en gratis React Native Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i React Native Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Native Academy-kurset indeholder 4 lektioner i alt.

Oversigt over Linking-modulet

React Natives indbyggede Linking-modul er grænsefladen mellem din app og operativsystemets system til URL-håndtering. Det har to formål: udgående — at åbne URL'er i browsere, kort, e-mail, telefon og andre apps — og indgående — at modtage URL'er, som blev brugt til at åbne din app.

For at deep linking fungerer korrekt, skal du håndtere både scenariet med kold opstart (appen startes af en URL) og scenariet med varm opstart (URL'en ankommer, mens appen allerede kører). Linking-modulet stiller forskellige API'er til rådighed for hvert scenarie.

import { Linking } from 'react-native';

// Outgoing:
Linking.openURL('https://example.com');

// Check if URL can be opened:
Linking.canOpenURL('myapp://screen').then(Boolean);

// Incoming - cold launch:
Linking.getInitialURL();

// Incoming - while running:
Linking.addEventListener('url', ({ url }) => {});

Omfattende opsætning af URL-lytteren

Det anbefalede mønster håndterer både kolde og varme opstarter i én effekt. Aflæs getInitialURL() for URL'en ved kold opstart, og tilføj en lytter til URL'er ved varm opstart. Begge kalder den samme funktion, handleURL, så routelogikken holdes samlet ét sted.

Placér denne effekt i din rodkomponent til navigation eller i en tilpasset useDeepLink-hook, så den køres, når navigationen er tilgængelig, og ryddes korrekt op, når komponenten afmonteres.

useEffect(() => {
  function handleURL(url) {
    if (url) routeDeepLink(url);
  }

  // Cold launch URL:
  Linking.getInitialURL().then(handleURL);

  // Warm launch URL:
  const sub = Linking.addEventListener('url', ({ url }) => handleURL(url));

  return () => sub.remove();
}, []);

Analyse af URL-komponenter

Moderne React Native med Hermes understøtter Web-API'et URL. Opret et URL-objekt ud fra deep link-strengen for nemt at få adgang til protocol, hostname, pathname og searchParams. Det er langt mere robust end manuel opdeling af strenge.

For skemaet myapp://settings/notifications?highlight=push er værtsnavnet settings, stinavnet /notifications, og searchParams indeholder forespørgselsparametrene som et URLSearchParams-objekt.

function parseDeepLink(url) {
  // 'myapp://settings/notifications?highlight=push'
  const parsed = new URL(url);

  return {
    screen: parsed.hostname,          // 'settings'
    path: parsed.pathname.slice(1),   // 'notifications'
    params: Object.fromEntries(
      parsed.searchParams.entries()   // { highlight: 'push' }
    ),
  };
}

Routematchning og navigation

Med de analyserede URL-dele kan du implementere en funktion, routeDeepLink, der matcher skærmnavnet med en navigationshandling. Brug et opslagobjekt eller en switch-sætning til at knytte URL-skærme til navne på navigatorskærme og parameterstrukturer.

Beskyt altid mod ugyldige eller fejlformaterede URL'er — hvis skærmen er ukendt, skal du navigere til startskærmen i stedet for at kaste en fejl. Deep links fra eksterne kilder skal behandles som input, du ikke har tillid til.

function routeDeepLink(url) {
  const { screen, path, params } = parseDeepLink(url);

  switch (screen) {
    case 'profile':
      navigation.navigate('Profile', { userId: path, ...params });
      break;
    case 'product':
      navigation.navigate('Product', { productId: path });
      break;
    case 'settings':
      navigation.navigate('Settings', { section: path });
      break;
    default:
      navigation.navigate('Home');
  }
}

Vent på, at navigationen er klar

En almindelig fejl er, at deep link-håndteringen kalder navigation.navigate(), før navigationscontaineren er monteret og initialiseret. Navigationsreferencen kan være null, eller stakken er måske endnu ikke sat op, hvilket får navigate-kaldet til at blive ignoreret uden fejl.

Brug callback-funktionen onReady i NavigationContainer sammen med en reference for at registrere, hvornår navigationen er klar. Gem ventende deep link-URL'er, og behandl dem i onReady samt efter hver ændring af navigationstilstanden.

const navigationRef = useNavigationContainerRef();
const pendingUrl = useRef(null);

function handleURL(url) {
  if (navigationRef.isReady()) {
    routeDeepLink(url);
  } else {
    pendingUrl.current = url; // queue it
  }
}

<NavigationContainer
  ref={navigationRef}
  onReady={() => {
    if (pendingUrl.current) {
      routeDeepLink(pendingUrl.current);
      pendingUrl.current = null;
    }
  }}
>

Tilpassede URL-skemaer kontra HTTPS-URL'er

Linking-API'et fungerer både med URL'er med tilpassede skemaer (myapp://) og HTTPS-universal links (https://yoursite.com/path). For universal links er URL-strukturen mere enkel — værtsnavnet er dit domæne, og stien er indholdsstien — men de kræver konfiguration af en webserver for at fungere.

Når du tester HTTPS-deep links lokalt, skal du bruge URL'er med tilpassede skemaer under udvikling og universal links i produktion. Den samme routeDeepLink-funktion kan håndtere begge dele, hvis du normaliserer resultatet af analysen til en fælles struktur.

function parseDeepLink(url) {
  const parsed = new URL(url);

  if (parsed.protocol === 'https:') {
    // Universal link: https://myapp.com/profile/123
    const parts = parsed.pathname.split('/').filter(Boolean);
    return { screen: parts[0], path: parts[1], params: {} };
  } else {
    // Custom scheme: myapp://profile/123
    return {
      screen: parsed.hostname,
      path: parsed.pathname.slice(1),
      params: Object.fromEntries(parsed.searchParams.entries()),
    };
  }
}

Udgående links: openURL

Linking.openURL() åbner enhver URL uden for din app. Send HTTPS-URL'er for at åbne dem i browseren, tel:-URL'er for at åbne telefonopkald, mailto: for at åbne e-mailklienten og skemaer for tredjepartsapps for at åbne bestemte apps. Den returnerer et Promise — vent altid på resultatet, og fang fejl, hvis URL'en ikke understøttes.

For e-maillinks skal du kode emnet og brødteksten i URL'en ved hjælp af standardformatet for mailto:. På iOS håndterer Telefon-appen tel:-links, mens standardappen til telefonopkald håndterer dem på Android.

// Open website:
await Linking.openURL('https://example.com');

// Call a phone number:
await Linking.openURL('tel:+15555551234');

// Compose email:
const subject = encodeURIComponent('Support Request');
const body = encodeURIComponent('Hi, I need help with...');
await Linking.openURL('mailto:support@example.com?subject=' + subject + '&body=' + body);

// Open Twitter profile:
await Linking.openURL('twitter://user?screen_name=reactnative');

Sikkerhedstjek med canOpenURL

Før du kalder openURL, skal du bruge Linking.canOpenURL() til at kontrollere, om enheden kan håndtere skemaet. På iOS 9 og nyere skal du tillade eksterne skemaer på forhånd i LSApplicationQueriesSchemes i Info.plist, ellers returnerer canOpenURL false, selv om appen er installeret.

Expos managed workflow lader dig tilføje disse poster på tilladelseslisten via nøglen ios.infoPlist i app.json. Sørg altid for et alternativ, f.eks. en HTTPS-URL, hvis native-appen ikke er installeret.

async function openTwitterProfile(username) {
  const twitterAppUrl = 'twitter://user?screen_name=' + username;
  const twitterWebUrl = 'https://twitter.com/' + username;

  const canOpen = await Linking.canOpenURL(twitterAppUrl);
  await Linking.openURL(canOpen ? twitterAppUrl : twitterWebUrl);
}

// app.json (iOS whitelist):
// 'ios': {
//   'infoPlist': {
//     'LSApplicationQueriesSchemes': ['twitter', 'instagram']
//   }
// }

Rensning af deep link-URL'er

Deep links fra eksterne kilder må aldrig stoles blindt på. Et ondsindet link kan sende vilkårlige værdier som parametre og forsøge at navigere til utilsigtede skærme eller indsætte data. Du skal altid rense og validere URL-parametre, før du bruger dem.

For id'er skal du kontrollere, at de har det forventede format, f.eks. UUID eller heltal. Brug et opslag på en tilladelsesliste til skærmnavne — navigér aldrig til et skærmnavn, der tages direkte fra URL'en. Log og kassér ugyldige URL'er i stedet for at få appen til at gå ned.

const ALLOWED_SCREENS = new Set(['profile', 'product', 'settings', 'home']);

function routeDeepLink(url) {
  try {
    const { screen, path, params } = parseDeepLink(url);

    if (!ALLOWED_SCREENS.has(screen)) {
      console.warn('Deep link to unknown screen:', screen);
      navigation.navigate('Home');
      return;
    }

    // Validate ID format:
    if (path && !/^[a-z0-9-]+$/i.test(path)) {
      throw new Error('Invalid path: ' + path);
    }

    navigation.navigate(capitalize(screen), { id: path, ...params });
  } catch (e) {
    navigation.navigate('Home');
  }
}

Sporing af deep link-kilder

Markedsføringskampagner og notifikationer har ofte brug for attribuering — altså viden om, hvilket link der førte til hvilken brugeradfærd. Tilføj UTM-parametre eller en tilpasset kildeparameter til deep link-URL'er, udtræk dem i håndteringen, og log dem i dit analysesystem.

For eksempel fortæller myapp://product/42?source=email_campaign&campaign=summer_sale dig, at brugeren kom fra en e-mailkampagne. Log denne hændelse til Amplitude, Firebase Analytics eller Mixpanel i funktionen routeDeepLink, før du navigerer.

function routeDeepLink(url) {
  const { screen, path, params } = parseDeepLink(url);

  // Log attribution:
  if (params.source || params.campaign) {
    analytics.track('deep_link_opened', {
      screen,
      source: params.source,
      campaign: params.campaign,
    });
  }

  // Then navigate:
  navigation.navigate(capitalize(screen), { id: path });
}

Test af deep links i produktionsbuilds

Deep links fungerer forskelligt under udvikling med Expo Go og i produktionsbuilds. Test altid deep linking i en produktions- eller release-build, der er installeret på en rigtig enhed eller en emulator. Expo Go har sit eget URL-skema (exp://), som er i konflikt med tilpassede skemaer.

Brug TestFlight på iOS eller det interne testspor på Android til at kontrollere deep links fra start til slut, før du udgiver offentligt. Dokumentér dit URL-skema og alle understøttede stier i en README-fil, så kvalitetssikringsteams kan teste hver rute.

// Supported deep links (document these for QA):
// myapp://home
// myapp://profile/{userId}
// myapp://product/{productId}?highlight={feature}
// myapp://settings/{section}
// myapp://order/{orderId}

// Test with:
// iOS: xcrun simctl openurl booted 'myapp://profile/abc123'
// Android: adb shell am start -a android.intent.action.VIEW -d 'myapp://profile/abc123'

Hurtigt tjek

Test din forståelse af begreberne inden for React Native Mobile Development fra denne lektion.

Besvar den i den interaktive lektion

Opsummering af lektionen

I denne lektion lærte du: Linking API håndterer både åbning af udgående URL'er og indgående deep link-URL'er via getInitialURL og addEventListener, URL Web API analyserer deep link-komponenter som hostname, pathname og searchParams på en enkel måde, og deep link-ruter skal være på en godkendelsesliste og renses, før der navigeres, for at forhindre sikkerhedsproblemer. Som det næste konfigurerer vi React Navigations indbyggede understøttelse af deep linking, så URL'er automatisk dirigeres til skærme.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 30
Lektioner: 120

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Linking-API og URL-parsing” gratis?

Ja — alle 3 lektioner i læringssporet React Native Academy, inklusive “Linking-API og URL-parsing”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. React Native Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Linking-API og URL-parsing”?

Brug Linking-API'et til at lytte efter indgående URL'er, mens appen kører, analysér URL'ens sti og forespørgselsparametre, og afsend en navigationshandling. Du øver dig i React Native Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Native Academy?

Der kræves ingen tidligere erfaring. React Native Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Linking-API og URL-parsing”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Native Academy-lektion?

Ja. Alle React Native Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Konfiguration af brugerdefinerede URL-skemaer
Linking-API og URL-parsing
Konfiguration af deep links i React Navigation
Universal Links (HTTPS-deep links) på iOS og Android

← Tilbage til React Native Academy