useHistory was not found in React-router-dom

react-router-dom v6 has replaced the useHistory() with useNavigate(). Here is the usage of useNavigate.

import { useNavigate } from "react-router-dom";

Inside your functional component,

const navigate = useNavigate(); 
const onClick = () => { navigate(‘/path) }

Following are the relevant methods of useNavigate hook:

• Replace history.push('/path') with navigate('/path') 
• Replace history.replace('/path') with navigate('/path', { replace: true }) 
• Replace history.push({ pathname: '/path', state: yourData, }) with navigate('/path', { state: yourData })

If you’re not planning to upgrade to v6 and lots of your files are already in react-router v5 then you can try migrating to the latest minor version of v5 by

npm install react-router-dom@"<6.0.0"

Then, over time, you can migrate it to the latest version by following their official guidelines.

Subscribe for
weekly updates