solidjs.com

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 a 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

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.