---
title: useNavigate
---

# useNavigate

<!--
⚠️ ⚠️ IMPORTANT ⚠️ ⚠️ 

Thank you for helping improve our documentation!

This file is auto-generated from the JSDoc comments in the source
code, so please edit the JSDoc comments in the file below and this
file will be re-generated once those changes are merged.

https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/hooks.tsx
-->

[MODES: framework, data, declarative]

## Summary

[Reference Documentation ↗](https://api.reactrouter.com/v7/functions/react_router.useNavigate.html)

Returns a function that lets you navigate programmatically in the browser in
response to user interactions or effects.

It's often better to use [`redirect`](../utils/redirect) in [`action`](../../start/framework/route-module#action)/[`loader`](../../start/framework/route-module#loader)
functions than this hook.

The returned function signature is `navigate(to, options?)`/`navigate(delta)` where:

* `to` can be a string path, a [`To`](https://api.reactrouter.com/v7/types/react_router.To.html) object, or a number (delta)
* `options` contains options for modifying the navigation
  * `flushSync`: Wrap the DOM updates in [`ReactDom.flushSync`](https://react.dev/reference/react-dom/flushSync)
  * `preventScrollReset`: Do not scroll back to the top of the page after navigation
  * `relative`: `"route"` or `"path"` to control relative routing logic
  * `replace`: Replace the current entry in the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History) stack
  * `state`: Optional [`history.state`](https://developer.mozilla.org/en-US/docs/Web/API/History/state) to include with the new [`Location`](https://api.reactrouter.com/v7/interfaces/react_router.Location.html)
  * `viewTransition`: Enable [`document.startViewTransition`](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) for this navigation

```tsx
import { useNavigate } from "react-router";

function SomeComponent() {
  let navigate = useNavigate();
  return (
    <button onClick={() => navigate(-1)}>
      Go Back
    </button>
  );
}
```

## Signature

```tsx
function useNavigate(): NavigateFunction
```

## Returns

A navigate function for programmatic navigation

## Examples

### Navigate to another path

```tsx
navigate("/some/route");
navigate("/some/route?search=param");
```

### Navigate with a [`To`](https://api.reactrouter.com/v7/types/react_router.To.html) object

All properties are optional.

```tsx
navigate({
  pathname: "/some/route",
  search: "?search=param",
  hash: "#hash",
  state: { some: "state" },
});
```

If you use `state`, that will be available on the [`Location`](https://api.reactrouter.com/v7/interfaces/react_router.Location.html) object on
the next page. Access it with `useLocation().state` (see [`useLocation`](../hooks/useLocation)).

### Navigate back or forward in the history stack

```tsx
// back
// often used to close modals
navigate(-1);

// forward
// often used in a multistep wizard workflows
navigate(1);
```

Be cautious with `navigate(number)`. If your application can load up to a
route that has a button that tries to navigate forward/back, there may not be
a `[`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
entry to go back or forward to, or it can go somewhere you don't expect
(like a different domain).

Only use this if you're sure they will have an entry in the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
stack to navigate to.

### Replace the current entry in the history stack

This will remove the current entry in the [`History`](https://developer.mozilla.org/en-US/docs/Web/API/History)
stack, replacing it with a new one, similar to a server side redirect.

```tsx
navigate("/some/route", { replace: true });
```

### Prevent Scroll Reset

[MODES: framework, data]

<br/>
<br/>

To prevent [`<ScrollRestoration>`](../components/ScrollRestoration) from resetting
the scroll position, use the `preventScrollReset` option.

```tsx
navigate("?some-tab=1", { preventScrollReset: true });
```

For example, if you have a tab interface connected to search params in the
middle of a page, and you don't want it to scroll to the top when a tab is
clicked.