diff --git a/src/routes/solid-router/reference/primitives/use-match.mdx b/src/routes/solid-router/reference/primitives/use-match.mdx index 4c46cbe80..6dca9eceb 100644 --- a/src/routes/solid-router/reference/primitives/use-match.mdx +++ b/src/routes/solid-router/reference/primitives/use-match.mdx @@ -10,52 +10,143 @@ tags: - path - conditional - links -version: '1.0' +version: "1.0" description: >- Check if paths match current route with useMatch - create active navigation links, conditional rendering based on route matching. --- -`useMatch` takes an accessor that returns the path and creates a Memo that returns match information if the current path matches the provided path. -Useful for determining if a given path matches the current route. +The `useMatch` function checks whether the current path matches a provided path pattern. -```js -const match = useMatch(() => props.href); +## Import -return
; +```ts +import { useMatch } from "@solidjs/router"; ``` -As a second parameter, `useMatch` also accepts a group of `MatchFilters`. -These filteres allow for a more granular check. +## Type -The filters are the same used by the `` itself and they accept either a an array of strings, or a regular expression. Additionally, there's a `boolean` option to match a route only if it has, or doesn't have, the HTML extension. +```ts +const useMatch: ( + path: () => S, + matchFilters?: MatchFilters +): Accessor; -```js -const filters: MatchFilters = { - parent: ["mom", "dad"] - id: /^\d+$/, - withHtmlExtension: (v: string) => v.length > 5 && v.endsWith(".html") +type MatchFilters

= P extends string + ? { [K in PathParams

[number]]?: MatchFilter } + : Record; + +interface PathMatch { + params: Params; + path: string; +} +``` + +## Parameters + +### `path` + +- **Type:** `() => S` +- **Required:** Yes + +An accessor function that returns the path pattern to match against the current route. +Uses the same syntax as the `path` prop in the [``](/solid-router/reference/components/route) component. +Supports [path parameters](/solid-router/concepts/path-parameters), [optional parameters](/solid-router/concepts/path-parameters#optional-parameters), and [wildcard parameters](/solid-router/concepts/path-parameters#wildcard-routes). + +### `filters` + +- **Type:** `MatchFilters` +- **Required:** No + +An object where keys correspond to route parameter names and values define match filters. +Each filter can be: + +- An array of allowed strings +- A regular expression pattern +- A function that receives the parameter value as a string and returns true if the parameter should match + +## Return value + +`useMatch` returns a memo containing a `PathMatch` object when the path matches, or `undefined` when there's no match. + +The `PathMatch` object contains: + +### `params` + +- **Type:** `Record` + +An object containing the matched path parameters as key-value pairs. + +### `path` + +- **Type:** `string` + +The matched path. + +## Examples + +### Basic usage + +```tsx +import { useMatch } from "@solidjs/router"; +import { type JSXElement } from "solid-js"; + +type NavLinkProps = { + href: string; + children: JSXElement; }; + +function NavLink(props: NavLinkProps) { + const match = useMatch(() => props.href); + + return ( + + {props.children} + + ); +} ``` -Finally, any parameter can be determined optional by adding a `?` at the end of the parameter name. +### With filters + +```tsx +import { useMatch } from "@solidjs/router"; +import { Show } from "solid-js"; -```js - const isReference = useMatch(() => "/:project?/reference/*?", { - project: ["solid-router", "solid-meta", "solid-start"], +function BlogPost() { + const match = useMatch(() => "/:lang?/blog/:slug", { + lang: ["en", "es", "fr"], + slug: /^[a-z0-9-]+$/, // Only allow lowercase letters, numbers, and hyphens }); + + const lang = () => match()?.params.lang || "en"; + + return ( + +

+

Blog slug: {match()?.params.slug}

+
+ + ); +} ``` -The check above will match: +### With custom filter functions -```text -/reference -/solid-router/reference -/solid-meta/reference -/solid-start/reference +```tsx +import { useMatch } from "@solidjs/router"; -/reference/... -/solid-router/reference/... -/solid-meta/reference/... -/solid-start/reference/... +function FileInfo() { + const match = useMatch(() => "/files/:type/:name", { + type: ["images", "documents", "videos"], + name: (name) => name.length > 5 && name.endsWith(".html"), + }); + + return
File: {match()?.params.name}
; +} ``` + +## Related + +- [`useParams`](/reference/router-primitives/use-params) +- [`useLocation`](/reference/router-primitives/use-location)