close

[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?

  1. 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 by useNavigate() so You Just need to use useNavigate(). Replace history.push with navigate. Replace history.replace with navigate. Also, You can Use state in navigate: navigate('/your_path', { state: { username:'admin' }}) And now your error must be solved. Thanks.

  2. 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 by useNavigate() so You Just need to use useNavigate(). Replace history.push with navigate. Replace history.replace with navigate. Also, You can Use state 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

Leave a Comment