Route Parameters

Route Parameters 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 Route Parameter (a part of the URL) that will be used to extract the [skuId].

    • Will match:
    • Will match:
    • Will match:
โ””โ”€โ”€ routes/
    โ””โ”€โ”€ sku/
        โ””โ”€โ”€ [skuId]/
            โ”œโ”€โ”€ index.tsx         #
            โ””โ”€โ”€ details/
                โ””โ”€โ”€ index.tsx     #

Retrieving the Route Parameter 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 '';

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

  return (
      <p>Pathname: {location.pathname}</p>
      <p>Sku Id: {location.params.skuId}</p>
Made with โค๏ธ by