Suggest an edit

Improve this article

Refine the answer for “What does the useNavigate() hook do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## What `useNavigate()` does

> `useNavigate()` is a hook that returns a **function** `navigate()`,
> which lets you **change the route (URL)** and **go to another page** programmatically, **without reloading the page**.

---

## Basic usage example

```javascript
import { useNavigate } from "react-router-dom";

function LoginButton() {
  const navigate = useNavigate();

function handleLogin() {
    // ... login logic
    navigate("/dashboard");
  }

return <button onClick={handleLogin}>Log in</button>;
}
```

After the click, `navigate("/dashboard")` is called ->
React Router **changes the URL and renders the new component** without reloading the page.

---

## Why this is needed

Sometimes navigating via a link isn't possible with `<Link>`,
for example:

- after a successful **login / registration**;
- after **saving a form**;
- after **deleting or creating** a resource;
- when **redirecting an unauthenticated user**.

In these cases, the navigation logic is written directly in the code, via `useNavigate()`.

---

## Syntax

```javascript
const navigate = useNavigate();
navigate(to: string, options?: { replace?: boolean; state?: any });
```

### Parameters:

| Parameter | Type | Description |
|---|---|---|
| `to` | `string` | The path to navigate to (e.g. `/profile/123`) |
| `replace` | `boolean` | If `true`, replaces the current URL (doesn't add a new entry to history) |
| `state` | `any` | Lets you pass data into `location.state` (e.g. flags, parameters) |

---

## Usage examples

### 1. Navigating to another route

```javascript
navigate("/about");
```

---

### 2. Replacing the current route (without adding to history)

```javascript
navigate("/login", { replace: true });
```

This behaves like `window.location.replace()` -
the user won't be able to go back with the "Back" button.

---

### 3. Navigating while passing state

```javascript
navigate("/checkout", { state: { fromCart: true } });
```

Later, the target component can read this state:

```javascript
import { useLocation } from "react-router-dom";

function Checkout() {
  const location = useLocation();
  console.log(location.state?.fromCart); // true
}
```

---

### 4. Navigating "back" or "forward"

You can pass a **number** to move through history:

```javascript
navigate(-1); // Back (like the "Back" button)
navigate(1);  // Forward
```

---

## A real login-logic example

```javascript
function LoginForm() {
  const navigate = useNavigate();

const handleSubmit = async () => {
    const success = await loginUser();
    if (success) {
      navigate("/profile");
    } else {
      alert("Invalid login or password");
    }
  };

return <button onClick={handleSubmit}>Log in</button>;
}
```

---

## Important:

- `useNavigate()` only works **inside components**
that live **inside** a `<Router>` (`BrowserRouter`, `HashRouter`, `MemoryRouter`, etc.).
- Calling `useNavigate()` outside the router's context throws an error:

```javascript
  Uncaught Error: useNavigate() may be used only in the context of a <Router>
  ```

---

## Comparison with other approaches

| Approach | When to use it |
|---|---|
| `<Link to="/page" />` | For regular navigation via JSX (UI) |
| `<Navigate to="/page" />` | For automatic redirects during render |
| `useNavigate()` | For navigation **from code / logic** (after user actions, API requests, etc.) |

---

## A combined scenario example

```javascript
import { useNavigate } from "react-router-dom";

function ProtectedPage() {
  const navigate = useNavigate();
  const isAuth = false; // example: the user is not authenticated

if (!isAuth) {
    navigate("/login", { replace: true });
  }

return <h1>Private page</h1>;
}
```

A user without authentication gets redirected to `/login`.

---

## Summary:

> `useNavigate()` is a hook for **programmatic navigation control** in React Router.
> It lets you:
>
> - navigate between routes from code;
> - pass state on navigation;
> - move through history forward/back;
> - replace the current route without adding to history.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts582 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.