Não é possível ler a propriedade 'history' de indefinido (gancho useHistory do React Router 5)

Estou usando o novo gancho useHistory do React Router, lançado algumas semanas atrás. Minha versão do roteador React é 5.1.2. My React está na versão 16.10.1. Você pode encontrar meu código na parte inferior.

No entanto, quando importo o novo useHistory do react-router, recebo este erro:

Uncaught TypeError: Cannot read property 'history' of undefined

que é causado por esta linha no 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 !!!!!!!!!!!!!!!!!
}

Como está relacionado ao useContext e talvez haja um conflito com o contexto, tentei remover completamente todas as chamadas para useContext, criando o provedor etc. etc. No entanto, isso não fez nada. Tentei com o React v16.8; mesma coisa. Não tenho idéia do que poderia estar causando isso, pois todos os outros recursos do roteador React funcionam bem.

*** Observe que o mesmo ocorre ao chamar os outros ganchos do roteador React, como useLocation ou useParams.

Mais alguém encontrou isso? Alguma idéia do que pode causar isso? Qualquer ajuda seria muito apreciada, pois não encontrei nada na web relacionado a esse problema.

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

É porque o contexto do reat-router não está definido nesse componente. Já que é o <Router>componente que define o contexto, você pode usar useHistoryem um subcomponente, mas não nesse.

Observe para outras pessoas que se deparam com esse problema e já envolveram o componente com o componente Roteador. Certifique-se de que o roteador e o gancho useHistory sejam importados do mesmo pacote. O mesmo erro pode ser gerado quando um deles é importado do react-router e o outro do react-router-dom e as versões dos pacotes desses pacotes não coincidem. Não use os dois, leia sobre a diferença aqui .

Atualizei o meu react-router-domde 5.0.0 para ^ 5.1.2 e foi resolvido. Você pode perceber que useHistoryestá em um subcomponente.