useHistory dando este error:
Error al compilar ./src/pages/UserForm/_UserForm.js Intento de error de importación: 'useHistory' no se exporta desde 'react-router-dom'. Este error ocurrió durante el tiempo de compilación y no se puede descartar.
versión de react-router-dom:
4.3.1
Código:
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 UserFormActualicé la versión de react-router-dom a
5.2.0
y está funcionando ahora.
En react-router-dom v6 useHistory() se reemplaza por useNavigate() .
Puedes usar:
import { useNavigate } from 'react-router-dom'; const navigate = useNavigate(); navigate('/home');Si debe apegarse a la última versión de react-router-dom v6.0.0, reemplace useHistory con useNavigate. De lo contrario, cambie su react-router-dom a v5.2.0 y su código funcionará como debería.
Reemplace useHistory con useNavigate luego
const navigate = useNavigate(); y luego reemplace history.push('/path') con navigate('/path')
Cambiar history.replace('/path') con navigate('/path', { replace: true })
Quiere usar state en empujar/navegar , navigate('/path', { state: { name:'Xyz' }})
import { useNavigate } from 'react-router-dom'; const navigate = useNavigate(); const confirm = (e) => { navigate.push('/') }En realidad, ninguna de las respuestas menciona cómo replicar los métodos que solían estar disponibles en el useHistory v5 pero que ya no están disponibles en v6, por ejemplo, goBack , goForward , go . El siguiente ejemplo está tomado de la guía de migración :
useHistory : // 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 del gancho useNavigate : // 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> </> ); }