“Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’. This error occurred during the build time and cannot be dismissed” is a common error that many programmers encounter. It happens in many ways. In this blog, we suggest you some useful solutions to solve it. Read on.

When Do You Get “Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’. This error occurred during the build time and cannot be dismissed” Error?

While you are using useHistory, you will encounter 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.

What is useHistory in react?

One of the most used hooks offered by React Router is useHistory. You can use it to get the history example that React Router uses. You can send visitors to another page by using the history instance. React Router utilizes a stack which is called “History Stack” to keep all of the entries that have been viewed by the user in the history instance it creates.

Syntax:

import { useHistory } from "react-router-dom";
// Inside a functional component 
export default function SomeComponent(props){ 
    // The useHistory() hook returns the history
    // object used by React Router 
    const history = useHistory(); 
}

UseHistory() returns a history object with a number of properties and methods.

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

Method 1: Utilize useNavigate() in react-router-dom v6

Utilizing useNavigate() in react-router-dom v6 is a great solution for you to solve the error “Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’. This error occurred during the build time and cannot be dismissed”.

UseNavigate() has taken the place of useHistory() in version 6 of the react-router-dom, thus you only need to use that (). Look at the following example to understand more about this method:

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

Substitute history.push with navigate just like below:

import { useNavigate } from 'react-router-dom'; // import useNavigate() 
const navigate = useNavigate(); // make const
history.push('/your_path')
Replace With
navigate('/your_path')

You also have to substitute history.replace with navigate. Do as the following:

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, state can be used in navigate.

import { useNavigate } from 'react-router-dom'; // import useNavigate() 
const navigate = useNavigate(); // make const
navigate('/your_path', { state: { username:'admin' }})

After finishing the above steps, your error will be completely resolved.

Method 2: Utilize the useHistory hook’s methods in React Router v5 app

Exceptting the above solution, there is another solution for you to fix the error “Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’. This error occurred during the build time and cannot be dismissed”. It is utilizing the useHistory hook’s methods in React Router v5 app. Look at this example:

// Here is a React Router v5 app import { useHistory } from "react-router-dom";
function App() { const { go, goBack, goForward } = useHistory();
return ( <> go(-2)}> Go 2 pages back Go back Go forward go(2)}> Go 2 pages forward ); }

Two apprroaches mentioned above are very simple, aren’t they? However, they are useful and flawless methods for you. After applying them, your error “Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’. This error occurred during the build time and cannot be dismissed” will be completely resolved and your program will run well without any errors. So, what are you waiting without applying them for your error to get your desired results?

Conclusion

“Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’. This error occurred during the build time and cannot be dismissed” is a confusing problem. We hope this blog provides useful information for you. If you have more questions about this topic, please comment below. Thank you for reading, we are always excited when one of our posts can provide useful information on a topic like this!

Read more

→ Failed to compile ./src/components/App/App.js Module not found: Can’t resolve ‘react-router-dom’ – How To Fix It?