From 8a1319ce2dbbc81f2e521725f0c5b0c5732f4cd2 Mon Sep 17 00:00:00 2001 From: "Amir H. Hashemi" <87268103+amirhhashemi@users.noreply.github.com> Date: Sun, 30 Nov 2025 11:32:04 +0330 Subject: [PATCH 1/2] Update useParams reference page --- .../reference/primitives/use-params.mdx | 55 ++++++++++++++++--- 1 file changed, 47 insertions(+), 8 deletions(-) diff --git a/src/routes/solid-router/reference/primitives/use-params.mdx b/src/routes/solid-router/reference/primitives/use-params.mdx index 750752b20..8d2f776a5 100644 --- a/src/routes/solid-router/reference/primitives/use-params.mdx +++ b/src/routes/solid-router/reference/primitives/use-params.mdx @@ -1,24 +1,63 @@ --- title: useParams -use_cases: 'dynamic routes, user profiles, product pages, id-based content, url parameters' +use_cases: "dynamic routes, user profiles, product pages, id-based content, url parameters" tags: - params - dynamic - routes - parameters - reactive -version: '1.0' +version: "1.0" description: >- Access route parameters reactively with useParams - extract dynamic segments from URLs for user profiles, products, and ID-based pages. --- -`useParams` retrieves a reactive object similar to a store. -It contains the current route's path parameters as defined in the Route. +The `useParams` function retrieves the path parameters of the current route. -```js -const params = useParams(); +## Import -// Route path: /user/:id => /user/123 -console.log(params.id); // 123 +```ts +import { useParams } from "@solidjs/router"; ``` + +## Type + +```ts +function useParams>(): T; +``` + +## Parameters + +`useParams` takes no arguments. + +## Return value + +- **Type**: `T` + +`useParams` returns a reactive object where keys match the dynamic segments defined in the route path. +Accessing a property within a tracking scope registers a dependency, causing the computation to re-run when the parameter changes. + +## Examples + +### Basic usage + +```ts +import { createMemo } from "solid-js"; +import { useParams } from "@solidjs/router"; + +// Rendered via +function UserPage() { + const params = useParams(); + + // Derived value updates when the route parameter changes. + const title = createMemo(() => `Profile for ${params.id}`); + + return

{title()}

; +} +``` + +## Related + +- [useLocation](/solid-router/reference/primitives/use-location) +- [useSearchParams](/solid-router/reference/primitives/use-search-params) From 460c3f86888a3f9ca45ceac236f99a3a8c729d20 Mon Sep 17 00:00:00 2001 From: "Amir H. Hashemi" <87268103+amirhhashemi@users.noreply.github.com> Date: Sun, 30 Nov 2025 19:27:05 +0330 Subject: [PATCH 2/2] update --- src/routes/solid-router/reference/primitives/use-params.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/solid-router/reference/primitives/use-params.mdx b/src/routes/solid-router/reference/primitives/use-params.mdx index 8d2f776a5..46c0bad05 100644 --- a/src/routes/solid-router/reference/primitives/use-params.mdx +++ b/src/routes/solid-router/reference/primitives/use-params.mdx @@ -13,7 +13,7 @@ description: >- from URLs for user profiles, products, and ID-based pages. --- -The `useParams` function retrieves the path parameters of the current route. +The `useParams` function reads the path parameters of the current route. ## Import