Qwik City - useLocation()

Use useLocation() to retrieve the current location (URL).

The return value of useLocation() is equivalent to document.location, but it is safe to use on the server where there is no global document object.

Path Route Parameters

useLocation() encodes the Route Parameters as params.

Assume you have:

  • Route: https://example.com/sku/[skuId]
  • User navigates to: https://example.com/sku/1234
  • Then the skuId can be retrieved through useLocation().params.skuId.
export default component$(() => {
  const location = useLocation();

  return (
    <Host>
      <h1>SKU</h1>
      <p>pathname: {location.pathname}</p>
      <p>skuId: {location.params.skuId}</p>
    </Host>
  );
});
Made with ♡ by the Builder.io team