정의되지 않은 속성 '이력'을 읽을 수 없습니다(React Router 5의 useHistory hook).

정의되지 않은 속성 '이력'을 읽을 수 없습니다(React Router 5의 useHistory hook).

몇 주 전에 나온 리액트 라우터의 새로운 useHistory 훅을 사용하고 있습니다.리액트 라우터의 버전은 5.1.2입니다.My React는 버전 16.10.1입니다.내 코드는 아래쪽에 있습니다.

react-router에서 새로운 useHistory를 Import하면 다음 오류가 나타납니다.

Uncaught TypeError: Cannot read property 'history' of undefined

리액트 라우터의 이 라인에 의해 발생합니다.

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에서도 같은 테스트를 실시.리액트 라우터의 다른 기능은 모두 정상적으로 동작하기 때문에 원인이 무엇인지 알 수 없습니다.

*** 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>
    )
}

그이 it react-router해당 구성 요소에 컨텍스트가 설정되어 있지 않습니다.<Router>할 수 useHistory하위 구성 요소에는 없지만 하위 구성 요소에는 없습니다.

이 문제를 해결하기 위한 매우 기본적인 전략은 다음과 같습니다.

const AppWrapper = () => {
  return (
    <Router> // Set context
      <App /> // Now App has access to context
    </Router>
  )
}

const App = () => {
  let history = useHistory(); // Works!
...
// Render routes in this component

"wrapper" 하십시오.App직접적으로.

이 문제가 발생하여 이미 컴포넌트를 라우터 컴포넌트로 감싸고 있는 다른 사용자에게 주의해 주십시오.라우터와 useHistory 훅이 같은 패키지에서 Import되었는지 확인합니다.한쪽이 react-router에서 Import되고 다른 한쪽이 react-router-dom에서 Import되며 이들 패키지의 패키지 버전이 일치하지 않을 때 동일한 오류가 발생할 수 있습니다.둘 다 쓰지 말고 여기 있는 차이점에 대해 읽어보세요.

useHistory에 필요한 컨텍스트가 아직 설정되지 않았기 때문에 루트가 있는 컴포넌트에서는 useHistory가 작동하지 않습니다.

useHistory는 라우터에서 선언한 하위 구성요소 또는 구성요소에서 작동하지만 라우터의 상위 구성요소 또는 라우터 구성요소 자체에서는 작동하지 않습니다.

해결책은 다음과 같습니다.

메인(아버지) 컴포넌트

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

<BrowserRouter><App /></BrowserRouter>

자컴포넌트(App)에서

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


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

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

    return(

            <Route path="/">
                <div className={testClass}>HEADER</div>
            </Route>

    )
}

export default withRouter(App);

새로고침했습니다.react-router-dom5.0.0에서 ^5.1.2로 변경되어 해결되었습니다.눈치채실 수 있습니다.useHistory는 서브컴포넌트에 있습니다.

BrowserRouter를 사용합니다.

import {
  BrowserRouter as Router,
  Route,
  Switch,
} from 'react-router-dom';

라우터를 사용하는 경우 라우터의 이력을 지정해야 합니다.

import {
  Router,
  Route,
  Switch,
} from 'react-router-dom';

// Ensure you destructure the createBrowserHistory object
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();
return (
  <Router history={history} >
    ...
  </Router>
);

즉, const history = useHistory();를 서브컴포넌트로 이동해야 합니다.

언급URL : https://stackoverflow.com/questions/58220995/cannot-read-property-history-of-undefined-usehistory-hook-of-react-router-5