Skip to content

Commit a6bd366

Browse files
committed
update
1 parent 99f3dfa commit a6bd366

1 file changed

Lines changed: 58 additions & 0 deletions

File tree

src/routes/solid-router/reference/primitives/use-current-matches.mdx

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,23 @@ description: >-
1515
breadcrumbs, extract route metadata, and navigate nested routes.
1616
---
1717

18+
The `useCurrentMatches` function providing access to an array of all route matches corresponding to the current URL path.
19+
20+
## Return value
21+
22+
The function returns a getter function that provides access to the current route matches array. Each match object in the array contains:
23+
- params: An object containing extracted path parameters
24+
- path: The matched path segment string
25+
- route: A RouteDescription object containing:
26+
- key: Unique identifier for the route
27+
- originalPath: The path pattern as defined in the route configuration
28+
- pattern: The URL-encoded pattern used for matching
29+
- component: The component rendered for this route (if specified)
30+
- preload: The data loading function (if specified)
31+
- matcher: The function used to match this route
32+
- matchFilters: Optional filters applied during matching
33+
- info: Custom metadata object attached to the route definition
34+
1835
`useCurrentMatches` returns all the matches for the current matched route. Useful for getting all the route information.
1936

2037
For example if you stored breadcrumbs on your route definition you could retrieve them like so:
@@ -25,3 +42,44 @@ const breadcrumbs = createMemo(() =>
2542
matches().map((m) => m.route.info.breadcrumb)
2643
);
2744
```
45+
46+
useCurrentMatches
47+
48+
The function returns a getter that, when called, yields an array of RouteMatch[] objects representing each segment in the active route hierarchy.
49+
Function Signature
50+
const useCurrentMatches = () => useRouter().matches;
51+
Return Value
52+
The function returns a getter function that provides access to the current route matches array. Each match object in the array contains:
53+
- params: An object containing extracted path parameters
54+
- path: The matched path segment string
55+
- route: A RouteDescription object containing:
56+
- key: Unique identifier for the route
57+
- originalPath: The path pattern as defined in the route configuration
58+
- pattern: The URL-encoded pattern used for matching
59+
- component: The component rendered for this route (if specified)
60+
- preload: The data loading function (if specified)
61+
- matcher: The function used to match this route
62+
- matchFilters: Optional filters applied during matching
63+
- info: Custom metadata object attached to the route definition
64+
Characteristics
65+
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.
66+
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).
67+
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.
68+
Server-Side Support: During server-side rendering, the matches are populated and accessible through the request event object for data fetching purposes.
69+
Computation Process
70+
The matches are determined by:
71+
1. Taking the current location pathname
72+
2. Applying optional URL transformation if configured
73+
3. Iterating through route branches sorted by descending priority score
74+
4. Finding the first branch where all route segments match the location
75+
5. Returning an array of match objects for each segment in that branch
76+
Access Pattern
77+
The function returns a getter rather than a direct value, requiring invocation to obtain the current matches:
78+
const matches = useCurrentMatches(); // Returns getter function
79+
const currentMatches = matches(); // Returns RouteMatch[]
80+
Relationship to Other Hook Functions
81+
The matches computed by useCurrentMatches serve as the source for several other router primitives:
82+
- useParams derives parameter objects by merging params from all matches
83+
- useMatch provides similar functionality but for checking if a specific path matches the current location
84+
- useCurrentMatches provides the complete route hierarchy rather than a single route
85+
The info property accessible through the matches originates from custom metadata defined on route definitions, allowing retrieval of application-specific data attached to routes.

0 commit comments

Comments
 (0)