Signature

function useMatches(): {
  id: string;
  data: unknown;
  params: import("@smolter/core").Params;
}[];

Parameters

Takes no arguments. Requires RouterProvider in either React or Preact. Preact mountApplication installs this provider automatically.

Returns

Returns a one-element array containing { id, data, params } for the current snapshot. The ID is the manifest route ID, or an empty string when the route has none. The root module is not an additional match, and this API does not produce a nested layout ancestry.

Example

Use a route ID to identify the active page. Use useLoaderData for inferred data from the current loader, or useRouteLoaderData for a specific active ID.

import { useMatches } from "@kasperrt/smolter/preact";

export function CurrentPage() {
  const [match] = useMatches();

  return <span>{match.id || "Unidentified route"}</span>;
}

Flat routes and missing matches

File names may encode URL segments, but the matcher remains flat. Even when no route matches, the result contains the current snapshot with an empty ID. Do not treat array length as proof that a page matched.