시도된 가져오기 오류: 'useHistory'가 'react-router-dom'에서 내보내지지 않았습니다.

시도된 가져오기 오류: 'useHistory'가 'react-router-dom'에서 내보내지지 않았습니다.

useHistory는 다음 오류를 발생시킵니다.

./src/pages/UserForm/_UserForm.js 가져오기 시도 오류: 'useHistory'가 'react-router-dom'에서 내보내지지 않았습니다.이 오류는 빌드 중에 발생했으며 취소할 수 없습니다.

react-module-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

리액트-라우터-dom v6 useHistory()에 의해 대체됩니다.useNavigate().

다음을 사용할 수 있습니다.

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

useHistory를 useNavigate로 바꿉니다.

const navigate = useNavigate();

를 교환합니다.history.push('/path')와 함께navigate('/path')

바꾸다history.replace('/path')와 함께navigate('/path', { replace: true })

사용하고 싶다state밀어서/밀어서navigate('/path', { state: { name:'Xyz' }})

지금까지 v5에서 사용 가능했던 메서드를 실제로 복제하는 방법에 대한 답변은 없습니다.useHistoryv6에서는 더 이상 사용할 수 없습니다.goBack,goForward,go다음 예시는 이행가이드에서 인용한 것입니다.

다음 방법을 사용하여 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와 동등한 어플리케이션으로,navigate로부터의 방법.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>
    </>
  );
}

useHistory에 의해 대체됩니다.useNavigatev6에 있습니다.

useHistory name을 대체하여 Navigate를 사용하거나 다음 3가지 간단한 단계를 수행합니다.

1. import { useNavigate } from 'react-router-dom' ;파일 맨 위에 있습니다.

2. const navigate = useNavigate();기능을 정의합니다.

3. navigate("/path_name");경로로 리디렉션합니다.

react-router-dom 버전을

5.2.0

그리고 이제 작동한다.

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

const navigate = useNavigate();

const confirm = (e) => {
    navigate.push('/')
}

react-router-dom v6에서는 useHistory() 함수는 useNavigate()로 대체됩니다.

const navigate = useNavigate();

네비게이트/네비게이션")

useHistory를 useNavigate로 바꿉니다.

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

그리고나서

const navigate = useNavigate();

지난,

navigate("/home");

V6는 useHistory 훅을 폐기했습니다.이제 useNavigate 훅이 사용됩니다.
사용.

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

함수 이름 sendData가 있다고 가정합니다.

function sendData(){
    let data = {name,email,password}
    let results = await fetch('http://localhost:8000/api/register',{
        method:'POST',
        headers:{
            'Content-Type': 'application/json',
            'Accept':'application/json'
        },
        body:JSON.stringify(data)
    });
    results = await results.json();
    console.warn("results",results);
    localStorage.setItem('user',JSON.stringify(results))
    navigate('../add',{replace:true})
}

되돌아가다navigate('../add',{replace:true})
앞으로 나아가기 위한 사용navigate('/add')

최신 react-router-dom v6.0.0을 사용해야 하는 경우 useHistory를 useNavigate로 바꿉니다.또는 react-router-dom을 v5.2.0으로 다운그레이드하면 코드가 정상적으로 동작합니다.

반응 반응 반응 돔 v5 useHistory단,v6를 사용해야 합니다.useNavigate후크

사용방법:

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

function SignupForm() {
  let navigate = useNavigate();

  async function handleSubmit(event) {
    event.preventDefault();
    await submitForm(event.target);
    navigate("../success", { replace: true });
  }

  return <form onSubmit={handleSubmit}>{/* ... */}</form>;

언급URL : https://stackoverflow.com/questions/62861269/attempted-import-error-usehistory-is-not-exported-from-react-router-dom