useHistory is not exported from react-router-dom


You might get this error after upgrading react-router-dom to version 6.x.x

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

Solution:

You need to replace useHisotry with useNavigate:

  1. Navigate to Path
    • Replace history.push(‘/home’) with navigate(‘/home’)
  2. Replace Page
    • Change history.replace(‘/dashboard’) with navigate(‘/dashboard’, { replace: true })

The following are similar methods of go,goForward,goBack in navigate:

  1. Go Forward to next page
    • const { goForward } = useHistory();
    • onClick of goForward() -> to navigate(1)
  2. Go to Previous page
    • const { goBack} = useHistory() to {goBack()} to navigate(-1)
  3. Go to 2 pages before
    • const { go, } = useHistory()
    • change go(2) to navigate(2)

Hope this helps

Leave a Reply

Your email address will not be published. Required fields are marked *