Navigation Hooks

Hooks for navigating between pages and reading page state.

`useNavigation()`

Navigate between pages, read current page state, and track progress. Only re-renders when the current page changes.


const { goToNextPage, goBack, goToPage, currentPage, progress } = useNavigation()
 
return (
  <div>
    <p>Step {progress.current} of {progress.total}</p>
    <button onClick={goToNextPage}>Continue</button>
  </div>
)

Property	Type	Description
`goToNextPage`	`() => void`	Evaluate routes and navigate to the next page
`goBack`	`() => void`	Navigate to the previous page in history
`goToPage`	`(pageKey: string) => void`	Jump to a specific page by key
`currentPage`	`PageState \| null`	Current page object
`pageHistory`	`string[]`	Array of visited page keys
`progress`	`Progress`	Navigation progress

PageState

Field	Type	Description
`key`	`string`	Page identifier
`name`	`string`	Display name
`type`	`string`	Page type (`default`, `checkout`, `paywall`, etc.)
`slug`	`string`	URL slug
`index`	`number`	Position in the page list

Progress

Field	Type	Description
`current`	`number`	Current step number
`total`	`number`	Total number of pages
`percentage`	`number`	Progress as 0-100

`usePageData()`

Read page-level system variables. Re-renders on navigation.


const { currentId, progressPercentage, startedAt } = usePageData()

Property	Type	Description
`currentId`	`string`	Key of the current page
`currentIndex`	`number`	Zero-based index of the current page
`current`	`number`	One-based page number
`total`	`number`	Total page count
`progressPercentage`	`number`	Progress as 0-100
`startedAt`	`number`	Timestamp (ms) when the current page was entered