Nie można odczytać właściwości „historii” niezdefiniowanej (hook użytkownika useHistory w React Router 5)

Korzystam z nowego haka useHistory React Router, który pojawił się kilka tygodni temu. Moja wersja React-routera to 5.1.2. Mój React jest w wersji 16.10.1. Mój kod możesz znaleźć na dole.

Jednak kiedy importuję nowe useHistory z React-Routera, pojawia się ten błąd:

Uncaught TypeError: Cannot read property 'history' of undefined

który jest spowodowany przez tę linię w React-routerze

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 !!!!!!!!!!!!!!!!!
}

Ponieważ jest to związane z useContext i być może przyczyną jest konflikt z kontekstem, próbowałem całkowicie usunąć wszystkie wywołania useContext, utworzyć dostawcę itp. Jednak to nic nie zrobiło. Wypróbowałem z React v16.8; ta sama rzecz. Nie mam pojęcia, co może być tego przyczyną, ponieważ każda inna funkcja routera React działa dobrze.

*** Pamiętaj, że to samo dzieje się podczas wywoływania innych haków routera React, takich jak useLocation lub useParams.

Czy ktoś jeszcze tego doświadczył? Wszelkie pomysły na to, co może to powodować? Jakakolwiek pomoc byłaby bardzo mile widziana, ponieważ nie znalazłem w sieci nic związanego z tym problemem.

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

Jest tak, ponieważ kontekst reagującego routera nie jest ustawiony w tym komponencie. Ponieważ jest to <Router>komponent, który określa kontekst, którego można użyć useHistoryw podskładniku, ale nie w tym.

Uwaga dla innych osób, które napotkały ten problem i już zawarły komponent w komponencie Router. Upewnij się, że router i hak useHistory są importowane z tego samego pakietu. Ten sam błąd może zostać zgłoszony, gdy jeden z nich zostanie zaimportowany z React-Routera, a drugi z React-Router-Dom i wersje pakietów tych pakietów nie pasują. Nie używaj obu z nich, przeczytaj o różnicy tutaj .

Zaktualizowałem mój react-router-domz 5.0.0 do ^ 5.1.2 i został rozwiązany. Możesz zauważyć, żeuseHistory jest w podskładniku.