Pass Params Link Expo Router: A Comprehensive Guide

When working with React Native applications, especially those built with Expo, understanding how to pass parameters through links is crucial. The Expo Router is a powerful tool that allows you to navigate between screens and pass data seamlessly. In this article, we will delve into the intricacies of using the pass params link with Expo Router, providing you with a detailed and multi-dimensional introduction.

Understanding the Basics

Before we dive into the specifics of passing parameters, it’s essential to have a solid understanding of the Expo Router. The Expo Router is a part of the React Navigation library, which is widely used for navigating between screens in React Native applications. It provides a simple and intuitive way to navigate through your app, making it easier to manage the flow of your application.

When you navigate from one screen to another using the Expo Router, you can pass parameters as part of the navigation action. These parameters can be used to initialize the state of the target screen, allowing you to display relevant data or perform specific actions based on the passed values.

Passing Parameters Through Links

Passing parameters through links in the Expo Router is straightforward. You can achieve this by appending the parameters as query strings to the URL of the target screen. Let’s take a look at an example to illustrate this concept.

Suppose you have a list of users, and you want to navigate to a user detail screen when a user is selected. You can pass the user’s ID as a parameter in the URL. Here’s how you can do it:

import { NavigationContainer } from '@react-navigation/native';import { createStackNavigator } from '@react-navigation/stack';const Stack = createStackNavigator();function App() {  return (                                      );}function UsersScreen({ navigation }) {  const users = [    { id: 1, name: 'John Doe' },    { id: 2, name: 'Jane Smith' },    { id: 3, name: 'Alice Johnson' },  ];  return (          {users.map(user => (         navigation.navigate('User Details', { userId: user.id })}        >          {user.name}              ))}      );}function UserDetailsScreen({ route }) {  const { userId } = route.params;  // Fetch user details based on the userId  const user = getUserById(userId);  return (          User ID: {userId}      Name: {user.name}      );}

In this example, we have a UsersScreen component that displays a list of users. When a user is selected, we navigate to the UserDetailsScreen component and pass the user’s ID as a parameter. The UserDetailsScreen component then uses the passed parameter to fetch and display the user’s details.

Handling Parameters in the Target Screen

Once you have passed the parameters through the link, the target screen can access these parameters using the route.params object. This object contains all the parameters passed in the navigation action. Let’s take a look at an example to demonstrate this:

function UserDetailsScreen({ route }) {  const { userId } = route.params;  // Fetch user details based on the userId  const user = getUserById(userId);  return (          User ID: {userId}      Name: {user.name}      );}

In this example, the UserDetailsScreen component accesses the userId parameter from the route.params object and uses it to fetch and display the user’s details. This allows you to dynamically display relevant information based on the passed parameters.

Advanced Usage: Dynamic Parameters

In some cases, you may want to pass dynamic parameters that are not known at compile time. For example, you might want to pass a list of user IDs to a screen that displays a list of users. In such cases, you can use an array or an object to pass the dynamic parameters.

Let’s take a look at an example to illustrate this:

function UsersListScreen({ route }) {  const { userIds } = route.params;  // Fetch user details based on the userIds  const users = getUsersByIds(userIds);  return (