What does the useNavigate() hook do?

ReactJunior~2 min read

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

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.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.