URL Params & Query

useParams

This hook returns all the parameters for the current route as an object. Parameter types are

string or string[]

// File: app/products/pages/products/[id].tsx
// URL: /products/2
import {useParams} from "blitz"
const params = useParams()
// params = {id: "2"}

// File: app/pages/blog/[...slug].tsx
// URL: /blog/2020/1
const params = useParams()
// params = {slug: ["2020", "1"]}

useParam

This hook returns a single parameter cast to chosen type. Available types are:

number, string and array which always returns an array of strings.

// File: app/locations/pages/locations/[id]/[[...zipcode]].tsx
// URL: /locations/2/02137
import {useParam} from "blitz"
const id = useParam("id", "number")
const zipcodes = useParam("zipcode", "array")
// id = 2
// zipcodes = ["02137"]

// File: app/pages/blog/[slug].tsx
// URL: /blog/hello-world
const slug = useParam("slug", "string")
// slug = "hello-world"

useRouterQuery

This hook returns all the query parameters from the URL as an object. Parameter type is always

string

// URL: /products?sort=asc&limit=10
import {useRouterQuery} from "blitz"
const query = useRouterQuery()
// query = {sort: "asc", limit: "10"}