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 

Answer 1

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

You can use:

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