# Params and query

Source: https://signy.dev/documentation/1/router/params-and-query/

The current route, as signals.

## Params

`useParams(this)`, `useQuery(this)` and `useRoute(this)` return signals, so bind them like any other.

```js
const { Component, application, html, memoryRouter, Link, Outlet, useParams } = Signy;

class User extends Component {
  render() {
    const params = useParams(this);
    return html`<p>Showing user ${() => params.value.id}</p>`;
  }
}

class Users extends Component {
  render() {
    return html`
      <nav class="cluster">
        <${Link} to="/users/1">User 1</${Link}>
        <${Link} to="/users/2">User 2</${Link}>
        <${Link} to="/users/3">User 3</${Link}>
      </nav>
      <${Outlet} />
    `;
  }
}

const appRouter = memoryRouter({
  initialEntries: ["/users/1"],
  routes: [{ path: "/users/:id", component: User }],
});

application(Users).use(appRouter).mount("#router-params");
```

## Query

```js
const query = useQuery(this);
html`<p>Results for ${() => query.value.q}</p>`;
```

## Loaders

A route `loader` fetches data before the page shows. It gets the params, query, URL and an `AbortSignal`. Read the result with `useRouteData(this)`.

```js
{ path: '/users/:id', component: UserPage,
  loader: async ({ params, signal }) =>
    (await fetch(`/api/users/${params.id}`, { signal })).json() }

class UserPage extends Component {
  protected render() {
    const user = useRouteData<User>(this);
    return html`<h1>${() => user.value?.name}</h1>`;
  }
}
```

`useIsNavigating(this)` is true while a navigation and its loaders run.