# Reading query params from URL

This navigation use case focuses on how you can pass and read query params from the URL. Let's say you have a *Table* component and *on row select* you want users to be transferred to the *Details* page of a specific record. This can be achieved using the **Navigation** action step. 

Check out the instruction below:point\_down:

1. First, navigate to the **Pages** tab in the left side panel and create a new page (we'll name it *Customer* since it will display customer details).
2. Select your *Table* component and navigate to the **Triggers** section.
3. For the *On Row Select* trigger, click **Create action** to create a new action navigating to the *Customer* page.
4. Select the **Navigate** action step and set the destination page as `{{routes.customer.url}}`.
5. Next, in the **Query params** specify the following:\
   `id = {{ui.customersTable.selectedRow.data.customer_id}}`.
6. Now, go back to the *Customer* page and add a **Detail** component there to display the data of a selected record from the table.
7. Create a new action of the **Load Row** type for your current Table.
8. In the *Filters* section, for *customer\_id* specify the following variable to receive the **URL query parameter** on the child page:

   `{{activeRoute.queryParams.id}}`
9. Assign the *Load Row* action to the **Detail** component.

That's it! Now, when selecting a row in the Table, you'll immediately navigate to the child page with the selected customer displayed.

{% hint style="info" %}
This option can be also useful when creating a redirect after a form submit.
{% endhint %}

{% @arcade/embed flowId="L7qBNzNLI8RR0Xky1CMD" url="<https://app.arcade.software/share/L7qBNzNLI8RR0Xky1CMD>" %}