HiveBrain v1.2.0
Get Started
← Back to all entries
debugreactCritical

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

Submitted by: @import:stackoverflow-api··
0
Viewed 0 times
exportedusehistoryimporterrorfromdomattemptedreactnotrouter

Problem

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) => (
        
            
                {props.value !== 'initial' ?
                     previousStep(e)}>Back :
                     reGenerate(e)}>Re-generate
                }
            
            
            
                {
                    props.value === 'confirm' ?
                         confirm(e)}>Confirm :
                        props.value !== 'final' ?
                             nextStep(e)}>Continue :
                            null
                }
            
        

    );
    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 (
         
            Hello
         
    )
}
export default UserForm

Solution

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

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

Context

Stack Overflow Q#62861269, score: 801

Revisions (0)

No revisions yet.