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.