Qwik City - Slugs

Slugs are parts of the URLs that are extracted into parameters.

Imagine that you have a page with the following URLs where [skuId] can be any of the thousands of products that you have in your database. It would be impractical to create a route for each product. Instead, we need to define a slug (a part of the URL) that will be used to extract the [skuId].

• http://server/sku/[skuId]
  • Example: http://server/sku/1234
  • Example: http://server/sku/xyz-567
• http://server/sku/[skuId]/details
  • Example: http://server/sku/1234/details

- src/
  - routes/
    - sku/
      - [skuId]/
        - index.js       # http://server/sku/1234
        - details.js     # http://server/sku/1234/details

Retrieving the slug from the URL

Once we have [skuId] in the URL, we need a way to retrieve it. This can be done by using useLocation() API.

import { useLocation } from '@builder.io/qwik-city';

export default component$(() => {
  const location = useLocation();

  return (
    <Host>
      <h1>SKU</h1>
      <p>pathname: {location.pathname}</p>
      <p>skuId: {location.params.skuId}</p>
    </Host>
  );
});