From 4a71c865200b33cadd7617a4ee5f352da67d85b1 Mon Sep 17 00:00:00 2001 From: "Amir H. Hashemi" <87268103+amirhhashemi@users.noreply.github.com> Date: Fri, 2 Jan 2026 16:44:01 +0330 Subject: [PATCH 1/6] Update `useIsRouting` reference page --- .../reference/primitives/use-is-routing.mdx | 59 +++++++++++++++---- 1 file changed, 47 insertions(+), 12 deletions(-) diff --git a/src/routes/solid-router/reference/primitives/use-is-routing.mdx b/src/routes/solid-router/reference/primitives/use-is-routing.mdx index e92ea7e2d4..4e0caef122 100644 --- a/src/routes/solid-router/reference/primitives/use-is-routing.mdx +++ b/src/routes/solid-router/reference/primitives/use-is-routing.mdx @@ -9,21 +9,56 @@ tags: - pending - state - ui -version: '1.0' +version: "1.0" description: >- - Track route transitions with useIsRouting - display loading states, pending - UI, and transition feedback during navigation in SolidJS. + Retrieves a signal that indicates whether the route is currently in a transition. + Use this to show pending UI states when route resolution is suspended during concurrent rendering. --- -Retrieves a signal that indicates whether the route is currently in a transition. -This is useful for showing a stale or pending state when the route resolution is suspended state during concurrent rendering. +The `useIsRouting` function is a utility for detecting when the router is processing a page transition. -```js -const isRouting = useIsRouting(); +## Import -return ( -
- -
-); +```ts +import { useIsRouting } from "@solidjs/router"; ``` + +## Type + +```ts +const useIsRouting: () => () => boolean; +``` + +## Parameters + +None. + +## Return value + +**Type:** `() => boolean` + +An accessor function that returns `true` during route transitions and `false` otherwise. + +## Examples + +### Page transition indicator + +```tsx +import { useIsRouting } from "@solidjs/router"; + +function App() { + const isRouting = useIsRouting(); + + return ( + <> + {isRouting() &&
} + + + ); +} +``` + +## Related + +- [`Router`](/solid-router/reference/components/router) +- [`useNavigate`](/solid-router/reference/primitives/use-navigate) From d647639d3be9aeaa69de61d1ee41c723e53936cc Mon Sep 17 00:00:00 2001 From: "Amir H. Hashemi" <87268103+amirhhashemi@users.noreply.github.com> Date: Fri, 2 Jan 2026 16:50:35 +0330 Subject: [PATCH 2/6] update --- .../solid-router/reference/primitives/use-is-routing.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/solid-router/reference/primitives/use-is-routing.mdx b/src/routes/solid-router/reference/primitives/use-is-routing.mdx index 4e0caef122..1cf019be3d 100644 --- a/src/routes/solid-router/reference/primitives/use-is-routing.mdx +++ b/src/routes/solid-router/reference/primitives/use-is-routing.mdx @@ -15,7 +15,7 @@ description: >- Use this to show pending UI states when route resolution is suspended during concurrent rendering. --- -The `useIsRouting` function is a utility for detecting when the router is processing a page transition. +The `useIsRouting` function is a utility for detecting when the router is processing a route transition. ## Import @@ -41,7 +41,7 @@ An accessor function that returns `true` during route transitions and `false` ot ## Examples -### Page transition indicator +### Route transition indicator ```tsx import { useIsRouting } from "@solidjs/router"; From ac5b6bfac8c8a1e376584838bbd08144319b9978 Mon Sep 17 00:00:00 2001 From: "Amir H. Hashemi" <87268103+amirhhashemi@users.noreply.github.com> Date: Fri, 2 Jan 2026 17:04:12 +0330 Subject: [PATCH 3/6] update --- .../solid-router/reference/primitives/use-is-routing.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/solid-router/reference/primitives/use-is-routing.mdx b/src/routes/solid-router/reference/primitives/use-is-routing.mdx index 1cf019be3d..dbb847b83c 100644 --- a/src/routes/solid-router/reference/primitives/use-is-routing.mdx +++ b/src/routes/solid-router/reference/primitives/use-is-routing.mdx @@ -11,8 +11,8 @@ tags: - ui version: "1.0" description: >- - Retrieves a signal that indicates whether the route is currently in a transition. - Use this to show pending UI states when route resolution is suspended during concurrent rendering. + Track route transitions with useIsRouting - display loading states, pending + UI, and transition feedback during navigation in SolidJS. --- The `useIsRouting` function is a utility for detecting when the router is processing a route transition. From 99f3dfa1548acc58d48218af60f4a0c49e1bbf68 Mon Sep 17 00:00:00 2001 From: "Amir H. Hashemi" <87268103+amirhhashemi@users.noreply.github.com> Date: Fri, 2 Jan 2026 17:33:55 +0330 Subject: [PATCH 4/6] update --- src/routes/solid-router/reference/primitives/use-is-routing.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/solid-router/reference/primitives/use-is-routing.mdx b/src/routes/solid-router/reference/primitives/use-is-routing.mdx index dbb847b83c..37c4e08c62 100644 --- a/src/routes/solid-router/reference/primitives/use-is-routing.mdx +++ b/src/routes/solid-router/reference/primitives/use-is-routing.mdx @@ -60,5 +60,5 @@ function App() { ## Related -- [`Router`](/solid-router/reference/components/router) +- [``](/solid-router/reference/components/router) - [`useNavigate`](/solid-router/reference/primitives/use-navigate) From a6bd366fff9565018ee763a0d2d4b652a7a57140 Mon Sep 17 00:00:00 2001 From: "Amir H. Hashemi" <87268103+amirhhashemi@users.noreply.github.com> Date: Fri, 2 Jan 2026 19:04:25 +0330 Subject: [PATCH 5/6] update --- .../primitives/use-current-matches.mdx | 58 +++++++++++++++++++ 1 file changed, 58 insertions(+) diff --git a/src/routes/solid-router/reference/primitives/use-current-matches.mdx b/src/routes/solid-router/reference/primitives/use-current-matches.mdx index 5b01914778..8338735316 100644 --- a/src/routes/solid-router/reference/primitives/use-current-matches.mdx +++ b/src/routes/solid-router/reference/primitives/use-current-matches.mdx @@ -15,6 +15,23 @@ description: >- breadcrumbs, extract route metadata, and navigate nested routes. --- +The `useCurrentMatches` function providing access to an array of all route matches corresponding to the current URL path. + +## Return value + +The function returns a getter function that provides access to the current route matches array. Each match object in the array contains: +- params: An object containing extracted path parameters +- path: The matched path segment string +- route: A RouteDescription object containing: + - key: Unique identifier for the route + - originalPath: The path pattern as defined in the route configuration + - pattern: The URL-encoded pattern used for matching + - component: The component rendered for this route (if specified) + - preload: The data loading function (if specified) + - matcher: The function used to match this route + - matchFilters: Optional filters applied during matching + - info: Custom metadata object attached to the route definition + `useCurrentMatches` returns all the matches for the current matched route. Useful for getting all the route information. For example if you stored breadcrumbs on your route definition you could retrieve them like so: @@ -25,3 +42,44 @@ const breadcrumbs = createMemo(() => matches().map((m) => m.route.info.breadcrumb) ); ``` + +useCurrentMatches + +The function returns a getter that, when called, yields an array of RouteMatch[] objects representing each segment in the active route hierarchy. +Function Signature +const useCurrentMatches = () => useRouter().matches; +Return Value +The function returns a getter function that provides access to the current route matches array. Each match object in the array contains: +- params: An object containing extracted path parameters +- path: The matched path segment string +- route: A RouteDescription object containing: + - key: Unique identifier for the route + - originalPath: The path pattern as defined in the route configuration + - pattern: The URL-encoded pattern used for matching + - component: The component rendered for this route (if specified) + - preload: The data loading function (if specified) + - matcher: The function used to match this route + - matchFilters: Optional filters applied during matching + - info: Custom metadata object attached to the route definition +Characteristics +Reactive Updates: The returned getter provides access to a reactive computation that automatically updates when the URL location changes. The matches array recomputes only when the location changes, ensuring efficient reactivity. +Route Hierarchy: The returned array contains all matched route segments from the outermost to the innermost route. For nested routes such as /users/:id/profile, the array includes matches for /users/:id and /profile (if configured as separate segments). +Memoized Computation: The matches are computed through a memoized reactive system that searches through pre-sorted route branches based on priority scores, stopping at the first matching branch. +Server-Side Support: During server-side rendering, the matches are populated and accessible through the request event object for data fetching purposes. +Computation Process +The matches are determined by: +1. Taking the current location pathname +2. Applying optional URL transformation if configured +3. Iterating through route branches sorted by descending priority score +4. Finding the first branch where all route segments match the location +5. Returning an array of match objects for each segment in that branch +Access Pattern +The function returns a getter rather than a direct value, requiring invocation to obtain the current matches: +const matches = useCurrentMatches(); // Returns getter function +const currentMatches = matches(); // Returns RouteMatch[] +Relationship to Other Hook Functions +The matches computed by useCurrentMatches serve as the source for several other router primitives: +- useParams derives parameter objects by merging params from all matches +- useMatch provides similar functionality but for checking if a specific path matches the current location +- useCurrentMatches provides the complete route hierarchy rather than a single route +The info property accessible through the matches originates from custom metadata defined on route definitions, allowing retrieval of application-specific data attached to routes. From 42cd42fcfcad3a8d32800d0f532a890799aa7f68 Mon Sep 17 00:00:00 2001 From: "Amir H. Hashemi" <87268103+amirhhashemi@users.noreply.github.com> Date: Fri, 2 Jan 2026 19:06:20 +0330 Subject: [PATCH 6/6] Revert "update" This reverts commit a6bd366fff9565018ee763a0d2d4b652a7a57140. --- .../primitives/use-current-matches.mdx | 58 ------------------- 1 file changed, 58 deletions(-) diff --git a/src/routes/solid-router/reference/primitives/use-current-matches.mdx b/src/routes/solid-router/reference/primitives/use-current-matches.mdx index 8338735316..5b01914778 100644 --- a/src/routes/solid-router/reference/primitives/use-current-matches.mdx +++ b/src/routes/solid-router/reference/primitives/use-current-matches.mdx @@ -15,23 +15,6 @@ description: >- breadcrumbs, extract route metadata, and navigate nested routes. --- -The `useCurrentMatches` function providing access to an array of all route matches corresponding to the current URL path. - -## Return value - -The function returns a getter function that provides access to the current route matches array. Each match object in the array contains: -- params: An object containing extracted path parameters -- path: The matched path segment string -- route: A RouteDescription object containing: - - key: Unique identifier for the route - - originalPath: The path pattern as defined in the route configuration - - pattern: The URL-encoded pattern used for matching - - component: The component rendered for this route (if specified) - - preload: The data loading function (if specified) - - matcher: The function used to match this route - - matchFilters: Optional filters applied during matching - - info: Custom metadata object attached to the route definition - `useCurrentMatches` returns all the matches for the current matched route. Useful for getting all the route information. For example if you stored breadcrumbs on your route definition you could retrieve them like so: @@ -42,44 +25,3 @@ const breadcrumbs = createMemo(() => matches().map((m) => m.route.info.breadcrumb) ); ``` - -useCurrentMatches - -The function returns a getter that, when called, yields an array of RouteMatch[] objects representing each segment in the active route hierarchy. -Function Signature -const useCurrentMatches = () => useRouter().matches; -Return Value -The function returns a getter function that provides access to the current route matches array. Each match object in the array contains: -- params: An object containing extracted path parameters -- path: The matched path segment string -- route: A RouteDescription object containing: - - key: Unique identifier for the route - - originalPath: The path pattern as defined in the route configuration - - pattern: The URL-encoded pattern used for matching - - component: The component rendered for this route (if specified) - - preload: The data loading function (if specified) - - matcher: The function used to match this route - - matchFilters: Optional filters applied during matching - - info: Custom metadata object attached to the route definition -Characteristics -Reactive Updates: The returned getter provides access to a reactive computation that automatically updates when the URL location changes. The matches array recomputes only when the location changes, ensuring efficient reactivity. -Route Hierarchy: The returned array contains all matched route segments from the outermost to the innermost route. For nested routes such as /users/:id/profile, the array includes matches for /users/:id and /profile (if configured as separate segments). -Memoized Computation: The matches are computed through a memoized reactive system that searches through pre-sorted route branches based on priority scores, stopping at the first matching branch. -Server-Side Support: During server-side rendering, the matches are populated and accessible through the request event object for data fetching purposes. -Computation Process -The matches are determined by: -1. Taking the current location pathname -2. Applying optional URL transformation if configured -3. Iterating through route branches sorted by descending priority score -4. Finding the first branch where all route segments match the location -5. Returning an array of match objects for each segment in that branch -Access Pattern -The function returns a getter rather than a direct value, requiring invocation to obtain the current matches: -const matches = useCurrentMatches(); // Returns getter function -const currentMatches = matches(); // Returns RouteMatch[] -Relationship to Other Hook Functions -The matches computed by useCurrentMatches serve as the source for several other router primitives: -- useParams derives parameter objects by merging params from all matches -- useMatch provides similar functionality but for checking if a specific path matches the current location -- useCurrentMatches provides the complete route hierarchy rather than a single route -The info property accessible through the matches originates from custom metadata defined on route definitions, allowing retrieval of application-specific data attached to routes.