How to Navigate Programmatically with useNavigate

The useNavigate hook returns a function that changes the URL from code. You use it when the user is not clicking a link but the app still needs to move, like after a form submits or a session expires.

It is the programmatic counterpart to Link, for moments when no element was clicked.

Get the navigate function

Call useNavigate inside a component to receive the navigate function, then call that function with a path to move the user there.

App.jsx

import { useNavigate } from "react-router";
 
export default function Login() {
  const navigate = useNavigate();
  function handleSubmit(event) {
    event.preventDefault();
    navigate("/dashboard");
  }
  return <form onSubmit={handleSubmit}><button type="submit">Log in</button></form>;
}

After the handler runs, the URL becomes /dashboard and React Router renders the matching route. The preventDefault call stops the browser's own form submission, then navigate takes over.

You can call navigate from event handlers, Effects, and async callbacks. It is a side effect, so it never belongs in the render path itself.

Go back and replace history

The function also accepts a number, where -1 steps back one entry. Pass replace to swap the current entry instead of adding a new one.

App.jsx

navigate(-1);
navigate("/checkout", { replace: true });

Going back is common for closing a modal or finishing a wizard step. Replace is useful after login, so the back button does not return the user to the login page.

Only call navigate with a number when you know the history stack has that entry.

Pass state to the next page

The second argument can carry state, which the target page reads with useLocation.

App.jsx

navigate("/order/42", { state: { fromCheckout: true } });

The state travels with the history entry rather than the URL. It survives only that navigation, so the next page reads it once.

App.jsx

import { useLocation } from "react-router";
 
export default function Order() {
  const location = useLocation();
  const fromCheckout = location.state?.fromCheckout;
  return <h1>Order placed</h1>;
}

Use state for small hints like where the user came from. Do not put data that must survive a refresh here, because it disappears on reload.

Reading location.state with optional chaining keeps the page from crashing when a user opens it directly.

Prefer Link when possible

useNavigate is for navigation the user did not click. For ordinary links, use Link or NavLink, which render real anchors with keyboard support, right-click menus, and open-in-new-tab behavior.

A button that only changes pages should often be a Link styled as a button, as shown in the React Router tutorial. When the target path contains a changing value, build it with a parameter, covered in dynamic routes and URL parameters.

The same call can also be triggered by a timer, a quiz step, or a session timeout.

Common mistakes

• Using useNavigate for a normal link instead of Link.
• Calling navigate during render rather than in an event or Effect.
• Assuming state survives a page refresh.