[Fixed] Attempted import error: 'useHistory' is not exported from 'react-router-dom' – React-router

The Problem:

Trying to use useHistory from ‘react-router-dom’ throws an error indicating that ‘useHistory’ is not exported from ‘react-router-dom’. The error message appears during the build time and cannot be dismissed. The code snippet in question:
import from ‘react-router-dom’;

The current version of react-router-dom is 4.3.1.

The Solutions:

Solution 1: Upgrade to react-router-dom v6

In react-router-dom version 6, the useHistory hook has been replaced by useNavigate hook. The syntax for using useNavigate is:

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

const navigate = useNavigate();

navigate('/home');

Make sure to update your import statement and use navigate instead of history.push() to navigate to different routes in your application.

Solution 2: Update to useNavigate

In the provided code and your explanation, you’ve mentioned that the “useHistory” hook is not recognized in your code despite using the correct version of react-router-dom. To resolve this issue, you need to update the usage of “useHistory” with its modern alternative, “useNavigate”. Here’s how you’d accomplish this:

1. Import useNavigate:
Replace your import statement for “useHistory” with the following:

“`javascript
import { useNavigate } from “react-router-dom”;
“`

2. Use useNavigate:
Initialize “navigate” using useNavigate() inside your component:

“`javascript
const navigate = useNavigate();
“`

3. Replace history.push:
Replace all instances of `history.push(‘/path’)` with `navigate(‘/path’)`.

4. Replace history.replace:
Replace all instances of `history.replace(‘/path’)` with `navigate(‘/path’, { replace: true })`.

5. Using state in navigate:
If you want to pass state along with navigation, use `navigate(‘/path’, { state: { name: ‘XYZ’ } })`.

The key change here is using “useNavigate” instead of “useHistory”. This change ensures your code is using the modern React Router API.

Solution 3: Refactor the App by migrating from `useHistory` to `useNavigate`

The approach here is to upgrade the app from React Router v5 to v6 and replace the use of useHistory hook with the useNavigate hook. The useNavigate hook offers the same functionality as the useHistory hook, but it’s tailored for React Router v6. Here’s how the App component would look like after the migration:

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

function App() {
const navigate = useNavigate();

return (
<>
<button onClick={() => navigate(-2)}>
Go 2 pages back
</button>
<button onClick={() => navigate(-1)}>Go back</button>
<button onClick={() => navigate(1)}>
Go forward
</button>
<button onClick={() => navigate(2)}>
Go 2 pages forward
</button>
</>
);
}

export default App;

<p>
Now, instead of using useHistory hook and methods like go, goBack and goForward, the useNavigate hook and its navigate method are used to perform navigation within the application. This approach ensures compatibility with the latest version of React Router and resolves the error related to useHistory.
</p>

Solution 4: Update react-router-dom to latest version

The error “Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom'” is caused due to using an outdated version of the react-router-dom library. In version 6 of react-router-dom, the useHistory hook has been replaced with useNavigate. To fix this issue, you need to upgrade to the latest version of react-router-dom.

Follow these steps to update react-router-dom and fix the error:

1. Run the following command in your terminal to update react-router-dom to the latest version:

npm install react-router-dom@latest

2. Once the installation is complete, open the file where you are importing useHistory and replace it with useNavigate. For example:

- import { useHistory } from 'react-router-dom';
+ import { useNavigate } from 'react-router-dom';

3. In your code, replace all instances of useHistory() with useNavigate() . For example:

- const history = useHistory();
+ const navigate = useNavigate();

4. Save the file and restart your application.

After completing these steps, the error “Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom'” should be resolved.

Solution 5: Update react-router-dom to a compatible version

The error “Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom'” occurs when you are using a version of react-router-dom that does not export the ‘useHistory’ hook. To resolve this error, you should update your react-router-dom package to a compatible version.

In this specific case, the user upgraded their react-router-dom version from 4.3.1 to 5.2.0, and the error was resolved. This suggests that the version of react-router-dom (4.3.1) being used was not compatible with the version of React that was being used, and updating to a more recent version (5.2.0) resolved the issue.

To update your react-router-dom package, you can run the following command in your terminal:

npm install react-router-dom@latest

After updating the package, you should check your code to ensure that you are using the ‘useHistory’ hook correctly. Here’s an example of how to use the ‘useHistory’ hook in a React component:

import { useHistory } from 'react-router-dom';

const MyComponent = () => {
  const history = useHistory();

  const handleClick = () => {
    history.push('/new-page');
  };

  return (
    <button onClick={handleClick}>
      Click me to navigate to a new page
    </button>
  );
};

By updating your react-router-dom package to a compatible version and using the ‘useHistory’ hook correctly, you should be able to resolve the “Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom'” error.