Params and query

The current route, as signals.

Params

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

Query

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

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