Calling the function returned by useNavigate() with a path string navigates to that route, exactly as if the user had clicked a Link pointing there — this is the standard way to redirect programmatically in response to something other than a direct link click, like after a form successfully submits, after a login completes, or when a route guard determines the user shouldn't be on the current page. Passing { replace: true } as a second argument replaces the current entry in the browser's history stack instead of pushing a new one, useful for redirects that shouldn't leave the original page reachable via the back button, and passing a number, like navigate(-1), moves backward or forward through history exactly like the browser's own back/forward buttons.
1Understanding useNavigate
Calling the function returned by useNavigate() with a path string navigates to that route, exactly as if the user had clicked a Link pointing there — this is the standard way to redirect programmatically in response to something other than a direct link click, like after a form successfully submits, after a login completes, or when a route guard determines the user shouldn't be on the current page. Passing { replace: true } as a second argument replaces the current entry in the browser's history stack instead of pushing a new one, useful for redirects that shouldn't leave the original page reachable via the back button, and passing a number, like navigate(-1), moves backward or forward through history exactly like the browser's own back/forward buttons.
Pass { replace: true } to navigate() for redirects that shouldn't remain reachable via the back button, like redirecting away from a login page immediately after a successful login — otherwise pressing back would return the user right back to the page they just left.
import { useNavigate } from 'react-router-dom';
function LoginForm() {
const navigate = useNavigate();
const handleSubmit = (event) => {
event.preventDefault();
console.log('Login successful');
navigate('/dashboard');
};
return <form onSubmit={handleSubmit}><button type="submit">Log In</button></form>;
}2Practical Example
Here is a real-world application of useNavigate showing how it is used in production React code.
import { useNavigate } from 'react-router-dom';
function LoginPage() {
const navigate = useNavigate();
const handleLoginSuccess = () => navigate('/dashboard', { replace: true });
return <button onClick={handleLoginSuccess}>Simulate Login</button>;
}3Best Practices
Follow these guidelines when working with useNavigate:
1. Use navigate() for redirects triggered by code, like after a successful form submission or login, rather than trying to simulate a link click
2. Pass { replace: true } when the current page shouldn't remain in history after the redirect, such as leaving a login or a completed checkout flow
3. Prefer a declarative Link component over calling navigate() for anything the user directly clicks, reserving navigate() specifically for programmatic redirects
Tip: Pass { replace: true } to navigate() for redirects that shouldn't remain reachable via the back button, like redirecting away from a login page immediately after a successful login — otherwise pressing back would return the user right back to the page they just left.
import { useNavigate } from 'react-router-dom';
function LoginForm() {
const navigate = useNavigate();
const handleSubmit = (event) => {
event.preventDefault();
console.log('Login successful');
navigate('/dashboard');
};
return <form onSubmit={handleSubmit}><button type="submit">Log In</button></form>;
}