useHistory 给出此错误:
无法编译 ./src/pages/UserForm/_UserForm.js 尝试导入错误:“useHistory”未从“react-router- dom”导出。此错误发生在构建期间,无法消除。
react-router-dom 版本:
4.3.1
代码:
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
在 react-router-dom v6 useHistory()中被替换为useNavigate().
useHistory()
useNavigate()
您可以使用:
import { useNavigate } from 'react-router-dom'; const navigate = useNavigate(); navigate('/home');