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

Question

useHistory giving this error:

Failed to compile ./src/pages/UserForm/_UserForm.js Attempted import error: 'useHistory' is not exported from 'react-router-dom'. This error occurred during the build time and cannot be dismissed.

react-router-dom version:

4.3.1

Code:

import React, { useState, Fragment } from 'react';
import FormUserDetails from './FormUserDetails';
import FormPersonalDetails from './FormPersonalDetails';
import Confirm from './Confirm';
import Success from './Success';
import Button from '@material-ui/core/Button';
import { Grid, makeStyles } from '@material-ui/core';
import { useHistory } from 'react-router-dom';


function UserForm() {
    const [step, setStep] = useState(1);
    const history = useHistory();


    const StepButtons = (props) => (
        <React.Fragment>
            <Grid item xs={4}>
                {props.value !== 'initial' ?
                    <Button variant="outlined" className={classes.button} onClick={(e) => previousStep(e)}>Back</Button> :
                    <Button variant="outlined" className={classes.button} onClick={(e) => reGenerate(e)}>Re-generate</Button>
                }
            </Grid>
            <Grid item xs={4} />
            <Grid item xs={4}>
                {
                    props.value === 'confirm' ?
                        <Button variant="outlined" className={classes.button} style={{ float: "right" }} onClick={(e) => confirm(e)}>Confirm</Button> :
                        props.value !== 'final' ?
                            <Button variant="outlined" className={classes.button} style={{ float: "right" }} onClick={(e) => nextStep(e)}>Continue</Button> :
                            null
                }
            </Grid>
        </React.Fragment>

    );
    const nextStep = (e) => {
        e.preventDefault();
        setStep(prevState => prevState + 1)
    }
    const previousStep = (e) => {
        e.preventDefault();
        setStep(prevState => prevState - 1)
    }
    const reGenerate = (e) => {
        e.preventDefault();
    }
    const confirm = (e) => {
        history.push('/')
    }
    return (
         <div>
            <h1>Hello</h1>
         </div>
    )
}
export default UserForm

What about React version? Please note: You need to be using React >= 16.8 in order to use `useHistory` hook! — norbitrial, Jul 12 '20 at 12:56
React version is already 16.8.4. Thanks for pointing out the 'react-router-dom' version. @norbitrial — Nafeo Alam, Jul 12 '20 at 12:58

score 691 · Accepted Answer · edited Nov 27 '21 at 00:49

691

In react-router-dom v6 useHistory() is replaced by useNavigate().

You can use:

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/home');

edited Nov 27 '21 at 00:49

Kostas Minaidis

4,681
3
17
25

answered Apr 06 '21 at 15:37

Mohamed MILADI

6,993
1
11
9

3

Here you are hardcoding the page to be opened. How to get history here so that I can navigate the user to the previous page ? – ShashankAC Jan 15 '22 at 14:54
3

I spent more than enough time digging around on react-routers Github profile and couldn't find anything noting the replacement of 'useHistory'...maybe it's there after all, but it wasn't obvious. Thanks for making this obvious! – SammyPayne Jan 31 '22 at 22:57
1

@ShashankAC Agreed, it's not that obvious. See my answer below: https://stackoverflow.com/a/71394655/842238 – lee_mcmullen Mar 08 '22 at 11:59
@SammyPayne Agreed, it's not that obvious. See my answer below: https://stackoverflow.com/a/71394655/842238 – lee_mcmullen Mar 08 '22 at 11:59
2

They absolutely did not need to change that. Now my employer has to pay me to spend time to play the catchup game with react-router team, as if they are my competitor. Component maintainers should not make life more difficult for the people using their components. Standard engineering courtesy. – Victor Pudeyev Apr 14 '22 at 19:22
1

https://reactrouter.com/docs/en/v6/hooks/use-navigate The navigate function has two signatures: Either pass a To value (same type as ) with an optional second { replace, state } arg or Pass the delta you want to go in the history stack. For example, navigate(-1) is equivalent to hitting the back button. – Louis Huang May 25 '22 at 12:01

Sultan Aslam · Answer 2 · 2022-01-17T05:55:15.243

118

Replace useHistory with useNavigate then

const navigate = useNavigate();

and then replace history.push('/path') with navigate('/path')

Change history.replace('/path') with navigate('/path', { replace: true })

Want to use state in push/navigate do navigate('/path', { state: { name:'Xyz' }})

edited Jan 17 '22 at 05:55

answered Dec 30 '21 at 12:51

Sultan Aslam

5,600
2
38
44

2

Do you mean useNavigate(), because useNavigation() gives not an exported member error. – Thuy Jan 04 '22 at 04:36

score 41 · Answer 3 · answered Mar 08 '22 at 11:57

None of the answers actually mention how to replicate the methods which used to be available from the v5 useHistory hook but which are no longer available in v6 e.g. goBack, goForward, go. The following example is taken from the migration guide:

React Router v5 app using methods from `useHistory` hook:

// This is a React Router v5 app
import { useHistory } from "react-router-dom";

function App() {
  const { go, goBack, goForward } = useHistory();

  return (
    <>
      <button onClick={() => go(-2)}>
        Go 2 pages back
      </button>
      <button onClick={goBack}>Go back</button>
      <button onClick={goForward}>Go forward</button>
      <button onClick={() => go(2)}>
        Go 2 pages forward
      </button>
    </>
  );
}

Here is the equivalent app with v6 using `navigate` method from `useNavigate` hook:

// This is a React Router v6 app
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>
    </>
  );
}

> Attempted import error: 'useHistory' is not exported from 'react-router-dom'. useHistory is no more exported member, V6 uses `useNavigate()` — M.Abdullah Iqbal, Nov 24 '22 at 13:06
@M.AbdullahIqbal Thanks for your message, yes, my answer already says to use `useNavigate()` for v6. — lee_mcmullen, Nov 24 '22 at 15:14

score 32 · Answer 4 · answered Apr 22 '22 at 11:48

`useHistory` is replace by `useNavigate` in v6.

Just replace useHistory name to useNavigate, or follow these 3 simple steps.

import { useNavigate } from 'react-router-dom' ; on the top of your file.
const navigate = useNavigate(); define in your function.
navigate("/path_name"); redirect to your path.

score 16 · Answer 5 · answered Jul 12 '20 at 12:55

16

I upgraded the version of react-router-dom to

5.2.0

and it is working now.

answered Jul 12 '20 at 12:55

Nafeo Alam

4,000
3
14
22

Right, `useHistory` was launched in `5.2.0` – Hidayt Rahman Mar 01 '23 at 18:19

score 7 · Answer 6 · edited Jan 10 '22 at 08:05

7

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

const navigate = useNavigate();

const confirm = (e) => {
    navigate.push('/')
}

edited Jan 10 '22 at 08:05

Sercan

4,739
3
17
36

answered Jan 10 '22 at 02:59

Tabby

71
1
1

7

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 10 '22 at 07:55
looks like this doesn't work anymore eg. "is not a function" - on v6 – Jacob David C. Cunningham Mar 11 '22 at 09:03

score 7 · Answer 7 · answered Oct 10 '22 at 11:25

7

Just replace useHistory with useNavigate this way:

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

Then

const navigate = useNavigate();

Last,

navigate("/home");

answered Oct 10 '22 at 11:25

Fortuner

89
1
6

score 7 · Answer 8 · answered Dec 31 '22 at 08:37

V6 has scrapped useHistory hook. now useNavigate hook is used.
Usage

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

let say you have a function name sendData

function sendData(){
    let data = {name,email,password}
    let results = await fetch('http://localhost:8000/api/register',{
        method:'POST',
        headers:{
            'Content-Type': 'application/json',
            'Accept':'application/json'
        },
        body:JSON.stringify(data)
    });
    results = await results.json();
    console.warn("results",results);
    localStorage.setItem('user',JSON.stringify(results))
    navigate('../add',{replace:true})
}

To Go Back use navigate('../add',{replace:true})
To Go Forward use navigate('/add')

score 7 · Answer 9 · answered Mar 01 '23 at 18:30

Based on above answers am adding an additional points if the issue exists with v5

If you stick to react-router-dom v5, You have to upgrade to 5.2.0 and the issue will be resolved, because it was introduced in the 5.2.0

Or you can upgrade to v6 and use the useNavigate instead of useHistory

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

const navigate = useNavigate();

navigate('/home');

score 5 · Answer 10 · answered May 21 '22 at 09:44

5

In react-router-dom v6 useHistory() function is replaced by useNavigate().

const navigate = useNavigate();

navigate("/login")

answered May 21 '22 at 09:44

Jamal Ashraf

569
6
9

score 4 · Answer 11 · answered Nov 05 '21 at 15:24

4

If you must stick to the latest react-router-dom v6.0.0, then replace useHistory with useNavigate. Else, downgrade your react-router-dom to v5.2.0 and your code works as it should.

answered Nov 05 '21 at 15:24

Tosin Akerele

41
3

score 2 · Answer 12 · answered Apr 11 '22 at 14:02

react-router-dom v5 useHistory, but in v6 you should use useNavigate hook

Usage:

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

function SignupForm() {
  let navigate = useNavigate();

  async function handleSubmit(event) {
    event.preventDefault();
    await submitForm(event.target);
    navigate("../success", { replace: true });
  }

  return <form onSubmit={handleSubmit}>{/* ... */}</form>;

score 0 · Answer 13 · answered May 20 '23 at 22:50

0

the newer version has useNavigate, which u can import from 'react-router-dom'

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

answered May 20 '23 at 22:50

NAVXBEDI

19
5

2

Your answer could be improved with the help of supporting information – Harrison May 23 '23 at 09:50

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

13 Answers13

React Router v5 app using methods from `useHistory` hook:

Here is the equivalent app with v6 using `navigate` method from `useNavigate` hook:

`useHistory` is replace by `useNavigate` in v6.

Linked

Related

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

13 Answers13

React Router v5 app using methods from useHistory hook:

Here is the equivalent app with v6 using navigate method from useNavigate hook:

useHistory is replace by useNavigate in v6.

Linked

Related

React Router v5 app using methods from `useHistory` hook:

Here is the equivalent app with v6 using `navigate` method from `useNavigate` hook:

`useHistory` is replace by `useNavigate` in v6.