尝试导入错误：“useHistory”未从“react-router-dom”导出

Question

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

原文由 Nafeo Joy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 react-router-dom v6 中 useHistory() 被替换为 useNavigate() 。

您可以使用：

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

原文由 Mohamed MILADI 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

然后用 useNavigate 替换 useHistory

 const navigate = useNavigate();

然后将 history.push('/path') 替换为 navigate('/path')

将 history.replace('/path') 更改为 navigate('/path', { replace: true })

想要在 推送/导航 中使用 state navigate('/path', { state: { name:'Xyz' }})

原文由 Sultan Aslam 发布，翻译遵循 CC BY-SA 4.0 许可协议