useNavigate: Programmatic Navigation in React

Why it exists

React Router's <Link> component handles user-clicked navigation. But systems often need to navigate based on code logic, like redirecting after a successful API call. useNavigate provides this imperative API for client-side routing from within your components.

The mental model

Think of useNavigate as a remote control for the browser's address bar that you can use from your JavaScript code. While a <Link> is a visible button for the user, the navigate function is something you call yourself when a certain condition is met, like a form being successfully submitted.

How it works

Call useNavigate() at the top level of your component to get a navigate function. You can call this function in a few ways. First, with a string path like navigate('/dashboard'). Second, with a number to move through the browser's session history, like navigate(-1) to go back. Third, with an options object to modify the navigation, such as navigate('/home', { replace: true }) to prevent the user from returning to the current page via the back button.

When to use it

Use useNavigate for navigation triggered by component logic. Common cases include: redirecting a user after a successful form submission (e.g., login or signup), creating a "Go Back" button that calls navigate(-1), or programmatically advancing a user through a multi-step wizard.

When not to use it

For standard navigation, always prefer the declarative <Link> component for accessibility. Inside modern React Router loader or action functions, it is better to return redirect('/path') than to use this hook. useNavigate is for client-side component logic, not data-layer redirects.

One canonical example

To redirect a user after a successful login and prevent them from going back to the login page, you would use the replace option. Inside your component:

const navigate = useNavigate();
const handleLogin = async () => {
const success = await api.login(credentials);
if (success) {
navigate('/dashboard', { replace: true });
}
};

This replaces the login page in the history stack with the dashboard page.