试图导入错误:useHistory没有从react-router-dom中导出

给出这个错误的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

当前回答

没有一个答案实际上提到如何复制以前在版本5的useHistory钩子中可用，但在版本6中不再可用的方法，例如goBack, goForward, go。以下示例摘自迁移指南:

React Router v5应用程序使用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>
    </>
  );
}

下面是v6版本的应用程序，使用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>
    </>
  );
}

2022-03-08 11:57:15

其他回答

没有一个答案实际上提到如何复制以前在版本5的useHistory钩子中可用，但在版本6中不再可用的方法，例如goBack, goForward, go。以下示例摘自迁移指南:

React Router v5应用程序使用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>
    </>
  );
}

下面是v6版本的应用程序，使用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>
    </>
  );
}

2022-03-08 11:57:15

用usenavate替换useHistory 然后

const navigate = useNavigate();

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

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

想要在push/navigate do navigate('/path'， {state: {name:'Xyz'}})中使用state

2021-12-30 12:51:56

只需要用usenavate替换useHistory即可:

import { useNavigate } from "react-router-dom";

Then

const navigate = useNavigate();

最后的

navigate("/home");

2022-10-10 11:25:33

我升级了react-router-dom的版本

5.2.0

现在它正在起作用。

2020-07-12 12:55:47

在v6中useHistory被usenavate取代。

只需将useHistory名称替换为usenavate，或遵循以下3个简单步骤。

import {usenavate} from 'react-router-dom';在你文件的最上面。 const navigate = useNavigate();在函数中定义。导航(" / path_name ");重定向到你的路径。

2022-04-22 11:48:51

试图导入错误:useHistory没有从react-router-dom中导出

推荐文章

最新文章

标签