# Params and Deep Links — React Native

Source: https://www.skillbyai.com/en/react-native/n-params

> Passing data and opening screens from URLs.

## 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.

```tsx
// 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.

**Quiz:** What should you usually pass as a navigation parameter?

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

*Answer:* A small serialisable value such as an id. Screens load their own data so deep links work too.