使用历史记录给出此错误:

未能编译/src/pages/UserForm/_UserForm.js试图导入

react 路由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()取代.

你可以使用:

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

Reactjs相关问答推荐

尽管在CLI中收到来自Stripe的OK Post请求,但没有webhook Post请求的处理- NextJS 14

使用useEffect挂钩获取数据

使用setInterval判断数据的时间,然后在过期后从对象中删除;遇到性能问题

Firebase删除UserWithEmail AndPassword仅创建匿名用户

sourceBuffer. appendBuffer成功,但h5视频播放器卡住了

如何使用Reducer更新全局变量

通过单击具有此值的按钮将值添加到数组对象键

将动态元素中的输入数据传输到Reaction

Tailwind不使用@apply classes构建,并强制使用类似于移动的viewport

列表中的每个子项都应该有一个唯一的keyprops .在react 应用程序中

在MongoDB中,如何获取最后N条记录中字段不为空或不为空字符串的数据

无法读取未定义的属性(阅读 'editQuoteModalShown')reactredux

为什么 createSlice 中的 reducer 不能以不同的方式改变状态?

即使配置了 webpack.config.js,html-loader 也不起作用

页面不显示

AWS 全栈应用程序部署教程构建失败

DatePicker MUI 如何在日历左侧显示清除文本

如果传递给挂钩的数据需要事先修改,如何使用自定义挂钩?

使用 React 中的功能组件更改另一个组件的状态

axios post方法中的请求失败,状态码为500错误