CODEWITHSUNDEEP
reactjsreact-hooksreact-router
Nafeo Alam
Nafeo Alam

Reputation: 4692

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

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

Upvotes: 384

Views: 540833

Answers (13)

NAVXBEDI
NAVXBEDI

Reputation: 95

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

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

Upvotes: 4

Hidayt Rahman
Hidayt Rahman

Reputation: 2678

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');

Upvotes: 14

Rizwan Ullah
Rizwan Ullah

Reputation: 171

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')

Upvotes: 10

Fortuner
Fortuner

Reputation: 101

Just replace useHistory with useNavigate this way:

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

Then

const navigate = useNavigate();

Last,

navigate("/home");

Upvotes: 9

Jamal Ashraf
Jamal Ashraf

Reputation: 955

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

const navigate = useNavigate();

navigate("/login")

Upvotes: 5

Vinit Dabhi
Vinit Dabhi

Reputation: 1089

useHistory is replace by useNavigate in v6.

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

  1. import { useNavigate } from 'react-router-dom' ; on the top of your file.

  2. const navigate = useNavigate(); define in your function.

  3. navigate("/path_name"); redirect to your path.

Upvotes: 35

Mhammed Talhaouy
Mhammed Talhaouy

Reputation: 1269

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>;

Upvotes: 2

lee_mcmullen
lee_mcmullen

Reputation: 3177

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>
    </>
  );
}

Upvotes: 51

Sultan Aslam
Sultan Aslam

Reputation: 6238

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' }})

Upvotes: 137

Tabby
Tabby

Reputation: 89

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

const navigate = useNavigate();

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

Upvotes: 8

Mohamed MILADI
Mohamed MILADI

Reputation: 8081

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

You can use:

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

Upvotes: 798

Tosin Akerele
Tosin Akerele

Reputation: 39

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.

Upvotes: 4

Nafeo Alam
Nafeo Alam

Reputation: 4692

I upgraded the version of react-router-dom to

5.2.0

and it is working now.

Upvotes: 17

Related Questions