Skip to main content
The useNavigate function returns the navigation callback that allows components to programmatically navigate to different routes or paths. 
const navigate = useNavigate(): (options: { to: string; props?: Record<string, string> }) => void

​
Parameters

None

​
Returns

Returns the navigation callback function that accepts an options object with:
  • to - The path to navigate to (required)
  • props - Optional key-value pairs to pass to the destination route

​
Usage

​
Basic navigation

function NavigationExample() {
  const navigate = useNavigate()

  return VStack([
    Button("Go to Profile", () => navigate({ to: '/profile' })),
    Button("Go to Settings", () => navigate({ to: '/settings' }))
  ])
}

function NavigationWithProps() {
  const navigate = useNavigate()

  const goToDetail = (userId) => {
    navigate({
      to: '/user/detail',
      props: { userId: userId }
    })
  }

  return VStack([
    Button("View User 1", () => goToDetail("123")),
    Button("View User 2", () => goToDetail("456"))
  ])
}

​
Notes

  • The actual navigation behavior depends on the runtime environment
  • In web environments, this typically integrates with browser navigation
  • The default implementation logs the navigation attempt if not overridden
  • Navigation options support depends on the specific renderer implementation