useMatch

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.

const match = useMatch(() => props.href);

return <div classList={{ active: Boolean(match()) }} />;

As a second parameter, useMatch also accepts a group of MatchFilters. These filteres allow for a more granular check.

The filters are the same used by the <Router> 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.

const filters: MatchFilters = {
  parent: ["mom", "dad"]
  id: /^\d+$/,
  withHtmlExtension: (v: string) => v.length > 5 && v.endsWith(".html")
};

Finally, any parameter can be determined optional by adding a ? at the end of the parameter name.

  const isReference = useMatch(() => "/:project?/reference/*?", {
    project: ["solid-router", "solid-meta", "solid-start"],
  });

The check above will match:

/reference
/solid-router/reference
/solid-meta/reference
/solid-start/reference

/reference/...
/solid-router/reference/...
/solid-meta/reference/...
/solid-start/reference/...