Attempted import error: 'useHistory' is not exported from 'react-router-dom'
ReactjsReact HooksReactjs Problem Overview
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
Reactjs Solutions
Solution 1 - Reactjs
In react-router-dom v6 useHistory()
is replaced by useNavigate()
.
You can use:
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/home');
Solution 2 - Reactjs
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' }})
Solution 3 - Reactjs
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:
useHistory
hook:
React Router v5 app using methods from // 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>
</>
);
}
navigate
method from useNavigate
hook:
Here is the equivalent app with v6 using // 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>
</>
);
}
Solution 4 - Reactjs
I upgraded the version of react-router-dom to
> 5.2.0
and it is working now.
Solution 5 - Reactjs
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
const confirm = (e) => {
navigate.push('/')
}
Solution 6 - Reactjs
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.
Solution 7 - Reactjs
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.
Solution 8 - Reactjs
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>;