March 8, 2025
React Router is a popular routing library for React apps. It makes navigation easy in single-page applications (SPAs) by helping developers manage routes and URLs. With React Router v6, some changes were made, like replacing the useHistory hook with the new useNavigate hook. This change has many developers wondering about the differences between the two and how to adjust to the new API.
In this article, I’ll look at the key differences between useNavigate (React Router v6) and useHistory (React Router v5). We’ll also cover the benefits of useNavigate, how to use it in real-world cases, and best practices for adopting React Router v6. Whether you’re moving from v5 or starting with v6, this guide will help you use useNavigate the right way.
In React Router v5, the useHistory hook was the main tool for programmatic navigation. It gave you access to the history object. You could use methods like history.push and history.replace to move between routes.
import { useHistory } from ‘react-router-dom’;
function MyComponent() {
const history = useHistory();
const handleClick = () => {
history.push(‘/new-route’); // Navigate to a new route
};
return (
<button onClick={handleClick}>Go to New Route</button>
);
}
React Router v6 removed the useHistory hook. This was done to simplify the API and cut down on extra code. If you’re moving to v6, you’ll need to switch from useHistory to the new useNavigate hook.
The useNavigate hook replaces useHistory in React Router v6. It gives you a simpler way to handle navigation. Instead of using a history object, useNavigate gives you a navigate function. You can use this function to switch between routes.
import { useNavigate } from ‘react-router-dom’;
function MyComponent() {
const navigate = useNavigate();
const handleClick = () => {
navigate(‘/new-route’); // Navigate to a new route
};
return (
<button onClick={handleClick}>Go to New Route</button>
);
}
The syntax for useNavigate is simpler than useHistory. Instead of using history.push or history.replace, you just call navigate with the path you want.
history.push(‘/new-route’);
history.replace(‘/new-route’);
navigate(‘/new-route’);
navigate(‘/new-route’, { replace: true });
In v6, navigate defaults to pushing a new entry to the history stack. If you want to replace the current entry, you can pass the replace option.
history.goBack();
history.goForward();
navigate(-1); // Go back
navigate(1); // Go forward
Both hooks allow you to pass state to the new route, but the syntax differs slightly.
history.push(‘/new-route’, { state: { key: ‘value’ } });
navigate(‘/new-route’, { state: { key: ‘value’ } });
After a user submits a form, you might want to redirect them to a new page. Here’s how you can do it with both hooks:
const history = useHistory();
history.push(‘/success’);
const navigate = useNavigate();
navigate(‘/success’);
If a user isn’t authenticated, you can redirect them to a login page.
const history = useHistory();
if (!isAuthenticated) {
history.push(‘/login’);
}
const navigate = useNavigate();
if (!isAuthenticated) {
navigate(‘/login’);
}
The useNavigate hook makes routing simpler and cuts down on extra code. Its easy-to-use API helps you read and maintain your code better. If you’re starting a new project or moving to React Router v6, you should use useNavigate.
React Router v6 has key upgrades:
These updates make v6 a stronger pick for building modern, maintainable React apps.
Switching from useHistory to useNavigate in React Router v6 is a big step forward. It makes routing in React apps simpler and easier to understand. The useNavigate hook cuts down on extra code and makes your app cleaner.
With React Router v6 and useNavigate, you can create more modern and efficient apps. Whether you’re redirecting users after they submit a form or managing protected routes, useNavigate gives you a better way to handle it.
If you’re still on React Router v5, it’s time to upgrade. Try useNavigate now and see how it simplifies routing in your React apps.
© 2024 xlearnerdev. All rights reserved