Params and Deep Links

Navigate with identifiers, link from outside

Navigate with <Link href="/product/42"> or the router object (router.push, router.replace, router.back) and read parameters with useLocalSearchParams. In React Navigation you call navigation.navigate("Product", { id: "42" }) and read route.params. Pass small serialisable values such as ids, not whole objects or functions; the screen should load its data from the id so it also works when opened from a link. Deep links open a screen from a URL using a custom scheme (myapp://product/42) configured in app config, while universal links (iOS) and App Links (Android) use your https domain and need verification files on that domain.

Linking to and reading a product screen

Expo Router APIs; check the docs for your version.

// app/(tabs)/index.tsx
import { Link, router } from "expo-router";
import { Pressable, Text } from "react-native";

export default function Home() {
  return (
    <>
      <Link href="/product/42">Open product 42</Link>
      <Pressable onPress={() => router.push({ pathname: "/product/[id]", params: { id: "7" } })}>
        <Text>Open product 7</Text>
      </Pressable>
    </>
  );
}

// app/product/[id].tsx
import { useLocalSearchParams } from "expo-router";
import { Text } from "react-native";

export default function Product() {
  const { id } = useLocalSearchParams<{ id: string }>();
  return <Text>Product {id}</Text>;   // load the product by id here
}

// app.json: { "expo": { "scheme": "myapp" } }  ->  myapp://product/42

Treat link params as untrusted input

Anyone can craft a deep link. Validate ids and never let a link trigger a sensitive action such as a payment without confirmation.

Quick check: What should you usually pass as a navigation parameter?

• The entire Redux store
• A whole component instance
• A callback function for the next screen
• A small serialisable value such as an id