useMatch
useMatch
returns a signal indicating that the current location matches.
ts
const= match (() => "/my-route"); useMatch
ts
const= match (() => "/my-route"); useMatch
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 {} from "solid-start"; useMatch function() { Component const= match (() => "/path/to/somewhere"); useMatch }
tsx
import {} from "solid-start"; useMatch function() { Component const= match (() => "/path/to/somewhere"); useMatch }
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.