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

Question

I am trying to import useHistory from 'react-router-dom', however, I get this error: import error: 'useHistory' is not exported from 'react-router-dom'.

I have checked other answers as well such as Attempted import error: 'useHistory' is not exported from 'react-router-dom' this but to no avail. My package.json looks like this

I am using useHistory as such,

import React from 'react';
import { useState, useEffect } from 'react';
import { useHistory } from 'react-router-dom';

export default function Login(){
    const history = useHistory();
    console.log(history)
}

However, this line works fine and does not cause import issues from react-router-dom.

import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'

Does anyone have an idea how to solve this issue? much appreciated.

Is your `Login` component's route wrapped inside `BrowserRouter`? — Sanket Shah, Sep 19 '21 at 02:13

score 13 · Answer 1 · edited Feb 16 '22 at 13:02

13

UseHistory have already been replaced with useNavigate So try this

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

Inside of your function:

const navigate = useNavigate();
navigate('/home')

I hope this worked

edited Feb 16 '22 at 13:02

behzad

801
3
15
33

answered Nov 14 '21 at 19:00

Attah Aaron

149
1
6

2

They are not using v6 but v5 (according to the dependency screenshot) which should still have `useHistory`. – emeraldsanto Nov 14 '21 at 19:02
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 14 '21 at 19:51
It works for me also. Seems useHistory is outdated now. Thanks for all above contributors – Mangala Karunarathne Jul 02 '23 at 13:54

score 1 · Answer 2 · answered Dec 31 '21 at 10:28

1

useNavigate if you install v6 or more than react-router-dom": ^6.2.1

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

 let navigate = useNavigate();


 const onSubmit = async (e) => {
    e.preventDefault();
    await axios.post("http://localhost:3001/users", user);
    navigate(`/`);
 };

answered Dec 31 '21 at 10:28

Sarthak Raval

1,001
1
10
23

Not everyone is able to update to a new version, this is an unrealistic answer. According to their package.json, they are using v5 - typically this error arises from using history in the wrong scope. They need to make sure that the component is wrapped within a BrowserRouter on a component at least one level up in the tree. – Ian Rios Jan 25 '22 at 19:46

Ian Rios · Answer 3 · 2022-05-13T15:25:31.440

The correct answer to your problem is that you need to confirm your use of the history hook is within the scope of a BrowserRouter - a quick fix would be to move the BrowserRouter component up a level to app.js or index.js - As long as you invoke the useHistory hook within the scope of a component that is already within the context of a BrowserRouter, you should have no issues in v5. The people who commented about v6 would still need to do this same fix, the answer is not to upgrade, although if you have the ability to upgrade, I would do so.

Suggested Fix: Render the BrowserRouter on the index.js

// index.js
...
import { BrowserRouter } from 'react-router-dom' // <=V5 not compatible with V6

render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
...

Then on any component that is loaded within the component, you can use useHistory

Learn more about history and where it can load - https://github.com/remix-run/history

score -1 · Answer 4 · edited Jan 25 '22 at 19:06

-1

// `useHistory` has been replaced by `useNavigate` in react-router-dom v6

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

   function Invoices() {

let navigate = useNavigate();
  return

 (enter code here
    
<div>
      
<NewInvoiceForm
       
 onSubmit={async event => {
       
   let newInvoice = await createInvoice(
          
  event.target
        
  );
         
 navigate(`/invoices/${newInvoice.id}`);
      
  }}
     
 />
   
 </div>
 
 );

}

edited Jan 25 '22 at 19:06

Syscall

19,327
10
37
52

answered Jan 25 '22 at 18:32

Suraj Poddar

1
1

Your answer could be improved with additional supporting information. Please edit your answer to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](https://stackoverflow.com/help/how-to-answer). – Syscall Jan 25 '22 at 19:06
This is not the answer - Upgrading to v6 is not always possible, especially on a large project with lots of tech debt - view my answer here: https://stackoverflow.com/a/70854927/10359059 – Ian Rios Jan 25 '22 at 19:59
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 26 '22 at 08:05

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

4 Answers4

Linked