DevOps | Cloud | Analytics | Open Source | Programming





How To Fix - Error: useHistory is Not Exported from React-Router-Dom ?


In this post, we will explore How To Fix - Attempted Import Error: 'useHistory' is Not Exported from 'React-Router-Dom'. Error Logs -


Attempted import error: 'useHistory' is not exported from 'react-router-dom'

This error occurred during the build time and cannot be dismissed



import error: 'useHistory' is not exported from 'react-router-dom'.



export 'useHistory' (imported as 'useHistory') was not found



export 'useHistory' was not found in 'react-router-dom'



TypeError: Cannot read property 'push' of undefined
  Ideally you should be using the latest React-Router-Dom. Do the below sanity checks first.  

Primitive Checks:

  • What React.js Version are you using ?

npm view react version
OR


npm list --depth=0
OR


Go to project-path ---> package.json File 

Check for "react-router" value in the File .
 

  • What React-Router-Dom Version are you using ?
 

  • Are you using React >= 16.8 ? This is required to use the useHistory hook.
  If you done with above basic checks, you could proceed ahead with the Next Steps.  

Solution 1 - Older versions:

  • If you are OK, downgrade your React version to 5 (Not Recommended).
  • Then the "useHistory() " piece of code should work.
  If your project size restricts you to stick to the older version of React, you could try some of the below steps.

  • Confirm the use of useHistory() is within BrowserRouter scope. If you invoke the useHistory() hook within some component which is within context of a BrowserRouter, then things should work,
  • Move the BrowserRouter component one level up - to index.js or app.js etc.
 

Solution 2 - Newer Versions:

If you are using the LATEST Version of React (Recommended), then you have to make some changes to tune the code as per the latest changes. So proceed ahead with below. useHistory() is replaced by useNavigate() in React-Router-Dom Version 6. You have to make the below Replacements to adjust to that. Follow the steps below  -


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


const history = useHistory();

Replace with

const navigate = useNavigate();
 


history.push('/path')

Replace with

navigate('/path')
 


history.replace('/path')

Replace with

navigate('/path', { replace: true })
To Use State


navigate('/path', { state: { name:'SOME\_NAME' }})
  To Summarize


// VERSION 5 Code

import { useHistory } from "react-router-dom";
let history = useHistory();
history.push("/home");
 


// VERSION 6 Code

import { useNavigate } from "react-router-dom";
let navigate = useNavigate();
navigate("/home");
  Hope this helps to fix the issue.    

Other Interesting Reads -

   


Attempted import error: 'useHistory' is not exported from 'react-router-dom' , ,This error occurred during the build time and cannot be dismissed ,import error: 'useHistory' is not exported from 'react-router-dom'. ,export 'useHistory' (imported as 'useHistory') was not found ,export 'useHistory' was not found in 'react-router-dom' ,TypeError: Cannot read property 'push' of undefined , ,attempted import error: 'usenavigate' is not exported from 'react-router-dom'. ,attempted import error: 'switch' is not exported from 'react-router-dom'. ,react-router-dom usehistory ,usehistory in react router-dom v6 ,attempted import error react-router does not contain a default export imported as 'switch ,usenavigate vs usehistory ,usenavigate() may be used only in the context of a <router> component. ,usenavigate not working ,usehistory' is not exported from 'react-router-dom' ,routes' is not exported from 'react-router-dom' ,cannot get route react router ,react-router-dom usehistory not working ,import link from 'react-router-dom' not working , ,switch' is not exported from 'react-router-dom ,usehistory in react router-dom v6 ,withrouter' is not exported from 'react-router-dom ,react router-dom v6 ,usehistory react-router-dom ,usenavigate vs usehistory ,usenavigate react router-dom v6 ,usenavigate react router-dom