useMatch

useMatch returns a signal indicating that the current location matches
ts
const match = useMatch(() => "/my-route");
ts
const match = useMatch(() => "/my-route");

Usage

Determining if a given path matches the current route

useMatch takes an function that returns the path and returns a signal with match information if the current path matches the provided path. We can use this to determine if a given path matches the current route.

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

Reference

useMatch()

Call useMatch() inside a component to get the current URL (location).

tsx
import { useMatch } from "solid-start";
 
function Component() {
  const match = useMatch(() => "/path/to/somewhere");
}
tsx
import { useMatch } from "solid-start";
 
function Component() {
  const match = useMatch(() => "/path/to/somewhere");
}

Returns

A either undefined if not matched or a reactive object containing the attributes of the match:

  • path: string: the pathname part of the URL, without the query string,
  • params: reactive object: object containing key value pairs of dynamic route sections