{
  "id": "1053e9508e7f996ca04d887a",
  "source": "solid:signals",
  "type": "github-document",
  "title": "use-match",
  "content": "---\ntitle: useMatch\nuse_cases: \u003e-\n  active links, navigation highlighting, conditional rendering, path matching,\n  menu items\ntags:\n  - match\n  - active\n  - navigation\n  - path\n  - conditional\n  - links\nversion: \"1.0\"\ndescription: \u003e-\n  Check if paths match current route with useMatch - create active navigation\n  links, conditional rendering based on route matching.\n---\n\nThe `useMatch` function checks whether the current path matches a provided path pattern.\n\n## Import\n\n```ts\nimport { useMatch } from \"@solidjs/router\";\n```\n\n## Type\n\n```ts\nconst useMatch: \u003cS extends string\u003e(\n\tpath: () =\u003e S,\n\tmatchFilters?: MatchFilters\u003cS\u003e\n): Accessor\u003cPathMatch | undefined\u003e;\n\ntype MatchFilters\u003cP extends string | readonly string[] = any\u003e = P extends string\n\t? { [K in PathParams\u003cP\u003e[number]]?: MatchFilter }\n\t: Record\u003cstring, MatchFilter\u003e;\n\ninterface PathMatch {\n  params: Params;\n  path: string;\n}\n```\n\n## Parameters\n\n### `path`\n\n- **Type:** `() =\u003e S`\n- **Required:** Yes\n\nAn accessor function that returns the path pattern to match against the current route.\nUses the same syntax as the `path` prop in the [`\u003cRoute\u003e`](/solid-router/reference/components/route) component.\nSupports [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).\n\n### `filters`\n\n- **Type:** `MatchFilters\u003cS\u003e`\n- **Required:** No\n\nAn object where keys correspond to route parameter names and values define match filters.\nEach filter can be:\n\n- An array of allowed strings\n- A regular expression pattern\n- A function that receives the parameter value as a string and returns true if the parameter should match\n\n## Return value\n\n`useMatch` returns a memo containing a `PathMatch` object when the path matches, or `undefined` when there's no match.\n\nThe `PathMatch` object contains:\n\n### `params`\n\n- **Type:** `Record\u003cstring, string\u003e`\n\nAn object containing the matched path parameters as key-value pairs.\n\n### `path`\n\n- **Type:** `string`\n\nThe matched path.\n\n## Examples\n\n### Basic usage\n\n```tsx\nimport { useMatch } from \"@solidjs/router\";\nimport { type JSXElement } from \"solid-js\";\n\ntype NavLinkProps = {\n\thref: string;\n\tchildren: JSXElement;\n};\n\nfunction NavLink(props: NavLinkProps) {\n\tconst match = useMatch(() =\u003e props.href);\n\n\treturn (\n\t\t\u003ca href={props.href} classList={{ active: Boolean(match()) }}\u003e\n\t\t\t{props.children}\n\t\t\u003c/a\u003e\n\t);\n}\n```\n\n### With filters\n\n```tsx\nimport { useMatch } from \"@solidjs/router\";\nimport { Show } from \"solid-js\";\n\nfunction BlogPost() {\n\tconst match = useMatch(() =\u003e \"/:lang?/blog/:slug\", {\n\t\tlang: [\"en\", \"es\", \"fr\"],\n\t\tslug: /^[a-z0-9-]+$/, // Only allow lowercase letters, numbers, and hyphens\n\t});\n\n\tconst lang = () =\u003e match()?.params.lang || \"en\";\n\n\treturn (\n\t\t\u003cShow when={match()}\u003e\n\t\t\t\u003carticle lang={lang()}\u003e\n\t\t\t\t\u003cp\u003eBlog slug: {match()?.params.slug}\u003c/p\u003e\n\t\t\t\u003c/article\u003e\n\t\t\u003c/Show\u003e\n\t);\n}\n```\n\n### With custom filter functions\n\n```tsx\nimport { useMatch } from \"@solidjs/router\";\n\nfunction FileInfo() {\n\tconst match = useMatch(() =\u003e \"/files/:type/:name\", {\n\t\ttype: [\"images\", \"documents\", \"videos\"],\n\t\tname: (name) =\u003e name.length \u003e 5 \u0026\u0026 name.endsWith(\".html\"),\n\t});\n\n\treturn \u003cdiv\u003eFile: {match()?.params.name}\u003c/div\u003e;\n}\n```\n\n## Related\n\n- [`useParams`](/solid-router/reference/primitives/use-params)\n- [`useLocation`](/solid-router/reference/primitives/use-location)",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/primitives/use-match.mdx",
  "metadata": {
    "path": "src/routes/solid-router/reference/primitives/use-match.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 3426,
    "source_type": "github"
  },
  "hash": "dbf94a4d5ac6ec22ca3d8fcb479cb54dc61122f622662f3a838fc26fbb855426",
  "timestamp": "2026-02-23T11:43:00.193113495+01:00"
}