尝试导入错误:“useHistory"未从“react-router-dom"导出 [英] Attempted import error: 'useHistory' is not exported from 'react-router-dom'

问题描述

useHistory 给出此错误:

<块引用>

无法编译 ./src/pages/UserForm/_UserForm.js Attempted import错误:useHistory"未从react-router-dom"导出.这构建期间发生错误，无法消除.

react-router-dom 版本:

<块引用>

4.3.1

代码:

import React, { useState, Fragment } from 'react';从'./FormUserDetails'导入FormUserDetails；从'./FormPersonalDetails'导入FormPersonalDetails；从'./Confirm'导入确认；从 './Success' 导入成功；从@material-ui/core/Button"导入按钮；从@material-ui/core"导入 { Grid, makeStyles };从'react-router-dom'导入{useHistory}；函数用户窗体(){const [step, setStep] = useState(1);const 历史 = useHistory();const StepButtons = (道具) =>(<React.Fragment><网格项 xs={4}>{props.value !== 'initial' ?<按钮变体=概述"className={classes.button} onClick={(e) =>previousStep(e)}>返回</按钮>:<按钮变体=概述"className={classes.button} onClick={(e) =>reGenerate(e)}>Re-generate</Button>}</网格><网格项 xs={4}/><网格项 xs={4}>{props.value === '确认' ?<按钮变体=概述"className={classes.button} style={{ float: "right";}} onClick={(e) =>确认(e)}>确认</按钮>:props.value !== 'final' ?<按钮变体=概述"className={classes.button} style={{ float: "right";}} onClick={(e) =>nextStep(e)}>继续</按钮>:空值}</网格></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 确认 = (e) =>{history.push('/')}返回 (<div><h1>你好</h1>

)}导出默认用户表单

解决方案

我将 react-router-dom 的版本升级为

<块引用>

5.2.0

它现在正在工作.

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

解决方案

I upgraded the version of react-router-dom to

5.2.0

and it is working now.

这篇关于尝试导入错误:“useHistory"未从“react-router-dom"导出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！