[reactjs] 정의되지 않은 속성 ‘history’를 읽을 수 없습니다 (React Router 5의 useHistory 후크)

몇 주 전에 나온 React Router의 새로운 useHistory 후크를 사용하고 있습니다. 내 React-router 버전은 5.1.2입니다. 내 반응은 버전 16.10.1입니다. 하단에서 내 코드를 찾을 수 있습니다.

그러나 반응 라우터에서 새 useHistory를 가져올 때 다음 오류가 발생합니다.

Uncaught TypeError: Cannot read property 'history' of undefined

이것은 React-router 에서이 줄로 인해 발생합니다

function useHistory() {
  if (process.env.NODE_ENV !== "production") {
    !(typeof useContext === "function") ? process.env.NODE_ENV !== "production" ? invariant(false, "You must use React >= 16.8 in order to use useHistory()") : invariant(false) : void 0;
  }

  return useContext(context).history; <---------------- ERROR IS ON THIS LINE !!!!!!!!!!!!!!!!!
}

useContext와 관련이 있고 컨텍스트와의 충돌이 잘못되었을 수 있으므로 useContext에 대한 모든 호출을 완전히 제거하고 공급자를 만드는 등을 시도했지만 아무것도하지 않았습니다. React v16.8로 시도; 같은 것. React 라우터의 다른 모든 기능이 제대로 작동하기 때문에이 원인을 알 수 없습니다.

*** useLocation 또는 useParams와 같은 다른 React 라우터 후크를 호출 할 때도 마찬가지입니다.

다른 사람이 이것을 만났습니까? 이것이 발생할 수있는 아이디어가 있습니까? 이 문제와 관련하여 웹에서 아무것도 발견하지 못했기 때문에 도움을 주시면 감사하겠습니다.

import React, {useEffect, useContext} from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { Switch, useHistory } from 'react-router'
import { useTranslation } from 'react-i18next';

import lazyLoader from 'CommonApp/components/misc/lazyLoader';
import {AppContext} from 'CommonApp/context/context';

export default function App(props) {
    const { i18n } = useTranslation();
    const { language } = useContext(AppContext);
    let history = useHistory();

    useEffect(() => {
        i18n.changeLanguage(language);
    }, []);

    return(
        <Router>
            <Route path="/">
                <div className={testClass}>HEADER</div>
            </Route>
        </Router>
    )
}



답변

반응 라우터 컨텍스트가 해당 구성 요소에 설정되어 있지 않기 때문입니다. <Router>컨텍스트를 설정 하는 구성 요소 이므로 useHistory하위 구성 요소에서는 사용할 수 있지만 해당 구성 요소에서는 사용할 수 없습니다.


답변

이 문제가 발생하여 이미 라우터 구성 요소로 구성 요소를 감싼 다른 사람들에게 유의하십시오. 라우터와 useHistory 후크를 동일한 패키지에서 가져와야합니다. 하나는 react-router에서 가져오고 다른 하나는 react-router-dom에서 가져오고 해당 패키지의 패키지 버전이 일치하지 않으면 동일한 오류가 발생할 수 있습니다. 둘 다 사용하지 마십시오 . 차이점에 대해 읽으 십시오 .


답변

react-router-dom5.0.0에서 ^ 5.1.2로 업데이트 했으며 해결되었습니다. useHistory이 하위 구성 요소에 있음을 알 수 있습니다 .


답변