The simplest way to solve the error “export ‘useHistory’ (imported as ‘useHistory’) was not found in ‘react-router-dom'”, is to use the ‘useNavigate’ hook. Because that will return a function that allows you to navigate programmatically. Example ‘const navigate = useNavigate()’.
Why the export ‘useHistory’ was not found in react-router-dom Error Occur?
You will encounter the above error if you’re using useHistory() hook in react-router-dom v6 because this hook has been replaced by useNavigate() hook. So, a quick fix is to use useNavigate hook instead of useHistory hook. Why? Because the useNavigate() hook returns a function that allows you to navigate programmatically.
How to fix export ‘useHistory’ was not found in react-router-dom error
// 👇️ import useNavigate Here instead of useHistory
import {useNavigate} from 'react-router-dom';
export default function WelcomePage() {
const navigate = useNavigate();
const handleClick = () => {
// Now you can navigate programmatically to other urls
navigate('/login’);
};
// Then create a dom element that will be click to navigate
return (
<div>
<button onClick={handleClick}>Navigate to login page</button>
</div>
);
}In the above code, we have import ‘useNavigate’ instead of ‘useHistory’ because ‘useHistory()’ hook is replaced with ‘useNavigate()’ in version 6 of React Router. All that is going on is a button that will be clicked to navigate from our WelcomePage to the login page. Also, note that we have replaced history.push() with navigate() function which requires two parameters to be passed in ‘to’ and optional ‘options’.
Within our history stack, we can also replace the current entry by passing options to the navigate function instead of using the deprecated history.replace()
// 👇️ import useNavigate Here instead of useHistory
import {useNavigate} from 'react-router-dom';
export default function WelcomePage() {
const navigate = useNavigate();
const handleClick = () => {
// Navigate to login page and replace the entry stack
navigate('/login’, {replace: true});
};
// Then create a dom element that will be click to navigate
return (
<div>
<button onClick={handleClick}>Navigate to login page</button>
</div>
);
}Because we have set ‘replace’ property to true in the options object which is the second parameter the navigate() function takes. The new page will replace the current page in the history stack.
This is useful in situations where you don’t want users to be able to navigate back to certain pages after redirection. For example, when a user successfully signup and he’s redirected to his Dashboard, you would not want him to be able to navigate back and the signup page. Or simply, if you don’t want users to be able to navigate back to certain pages after redirection.
Also, if we want to parse some data to the new page and access it after redirection. We can do it by setting the data to the ‘state’ property on the option object.
navigate('/login’, {state: {userId: ‘567’’}} );Conclusion
To fix the error “export ‘useHistory’ (imported as ‘useHistory’) was not found in ‘react-router-dom'”, use ‘useNavigate’ hook instead of ‘useHistory’ hook.
An easy approach that I don’t recommend to fix the usehistory not found in react-router-dom error is by using an older version of ‘react-router-dom’. Although this will solve the bug, it’s good to always update your project packages to the latest versions.
