useRouterState hook | TanStack Router Docs

The useRouterState method is a hook that returns the current internal state of the router. This hook is useful for accessing the current state of the router in a component.

Tip

If you want to access the current location or the current matches, you should try out the useLocation and useMatches hooks first. These hooks are designed to be more ergonomic and easier to use than accessing the router state directly.

useRouterState options

The useRouterState hook accepts an optional options object.

opts.select option

Type: (state: RouterState) => TSelected
Optional
If supplied, this function will be called with the RouterState object and the return value will be returned from useRouterState.

opts.structuralSharing option

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

useRouterState returns

The current RouterState object or TSelected if a select function is provided.

Examples

tsx

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

function Component() {
  const state = useRouterState()
  //    ^ RouterState

  // OR

  const selected = useRouterState({
    select: (state) => state.location,
  })
  //    ^ ParsedLocation

  // ...
}