useMatches hook

The useMatches hook returns all of the RouteMatch objects from the router regardless of its callers position in the React component tree.

The useMatches hook accepts a single optional argument, an options object.

• Optional
• (matches: RouteMatch[]) => TSelected
• If supplied, this function will be called with the route matches and the return value will be returned from useMatches. This value will also be used to determine if the hook should re-render its parent component using shallow equality checks.

• Type: boolean
• Optional
• Configures whether structural sharing is enabled for the value returned by select.
• See the Render Optimizations guide for more information.

• If a select function is provided, the return value of the select function.
• If no select function is provided, an array of RouteMatch objects.

import { useMatches } from '@tanstack/react-router'

function Component() {
  const matches = useMatches()
  //     ^? [RouteMatch, RouteMatch, ...]
  // ...
}

import { useMatches } from '@tanstack/react-router'

function Component() {
  const matches = useMatches()
  //     ^? [RouteMatch, RouteMatch, ...]
  // ...
}