MENU
Programmatic Navigation
There is no longer a single "history" object instance handed to your components. Instead, each piece of what it used to offer is its own hook. The table below maps the old history object's properties and methods onto their current equivalents.
| Old (history object) | Current equivalent |
|---|---|
| history.length | no longer exposed |
| history.action | useNavigationType() |
| history.location | useLocation() |
| history.push(path, state) | navigate(path, { state }) |
| history.replace(path, state) | navigate(path, { replace: true, state }) |
| history.go(n) | navigate(n) |
| history.goBack() | navigate(-1) |
| history.goForward() | navigate(1) |
| history.block(prompt) | useBlocker() / unstable_usePrompt() |
navigate, the function returned by useNavigate(), is the one you'll use most: navigate(path) pushes a new entry (the default), navigate(path, { replace: true }) replaces the current one instead, and navigate(n) with a plain number moves through the history stack by n entries (so navigate(-1) is "go back" and navigate(1) is "go forward").