[Solved] Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’

While using useHistory I am facing the following error: Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’. This error occurred during the build time and cannot be dismissed in ReactJS. We are going to Learn about All Possible Solutions So Lets Get Start with This Article.

How Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’ Error Occurs?

While using useHistory I am facing the following error:

Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’. This error occurred during the build time and cannot be dismissed.

So here I am writing all the possible solutions that I have tried to resolve this error.

How To Solve Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’ Error?

Solution 1: Use useNavigate() in react-router-dom v6

If You are using react-router-dom v6 then useHistory() is replaced by useNavigate() so You Just need to use useNavigate(). Here is my example.

import { useNavigate } from 'react-router-dom'; // import useNavigate()
const navigate = useNavigate(); // make const

navigate('/your_path');

Replace history.push with navigate just like this.

import { useNavigate } from 'react-router-dom'; // import useNavigate()
const navigate = useNavigate(); // make const

history.push('/your_path') 

Replace With

navigate('/your_path')

Replace history.replace with navigate just like this.

import { useNavigate } from 'react-router-dom'; // import useNavigate()
const navigate = useNavigate(); // make const

history.replace('/your_path') 

Replace With

navigate('/your_path', { replace: true }

Also, You can Use state in navigate.

import { useNavigate } from 'react-router-dom'; // import useNavigate()
const navigate = useNavigate(); // make const

navigate('/your_path', { state: { username:'admin' }})

And now your error must be solved. Thanks.

Summary

It’s all About this error. Hope We solved Your error. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

• Module not found: Can’t resolve ‘web-vitals’
• Module not found: Can’t resolve ‘@mui/icons-material/FileDownload’
• Module.createRequire is not a function
• npm ERR! code ENOLOCAL npm ERR! Could not install from “@mui\material\utils” as it does not contain a package.json file
• How to go back to previous route in react-router-dom v6?