useRouterState hook

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.

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#

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

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

  // OR

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

  // ...
}

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

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

  // OR

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

  // ...
}