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?
How To Solve Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’ Error?
To Solve Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’ Error If You are using react-router-dom v6 then
useHistory()
is replaced byuseNavigate()
so You Just need to use useNavigate(). Replace history.push with navigate. Replace history.replace with navigate. Also, You can Usestate
in navigate: navigate(‘/your_path’, { state: { username:’admin’ }}) And now your error must be solved. Thanks.Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’
To Solve Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’ Error If You are using react-router-dom v6 then
useHistory()
is replaced byuseNavigate()
so You Just need to use useNavigate(). Replace history.push with navigate. Replace history.replace with navigate. Also, You can Usestate
in navigate: navigate(‘/your_path’, { state: { username:’admin’ }}) And now your error must be solved. Thanks.
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?