---
tags: brew-js-react
---

# Access route parameters

In view component, route parameters can be accessed by `useRouteParam`.

Assuming we have route `/{view:products}/{id?}` and `ProductInfo` is registered with `{view: "products", id: /.+/}`:

function ProductInfo() {
    const id = useRouteParam('id');
    const [productInfo] = useAsync(() => api.getProductInfo(id), [id]);
    // ...
}

A second argument can be passed as the default value. If the route parameter is empty, it will cause a redirection to a proper path where the route parameter resolves to the given value.

function ProductInfo() {
    // show the product with ID = 1 by default
    // e.g. landing on /products will redirect to /products/1
    const id = useRouteParam('id', '1');
    // ...
}

## Component update on navigation

When user navigate to `/product/2`, `useRouteParam` will trigger a component update with the new route parameter value (i.e. `2`).

## Setting route parameters

Route parameters can be updated directly on `app.route`. Note that current view might not match the new path and will be unmounted upon update.