Impossibile leggere la 'storia' della proprietà di undefined (useHistory hook of React Router 5)

Sto usando il nuovo uso History hook di React Router, uscito poche settimane fa. La mia versione di React-router è 5.1.2. My React è alla versione 16.10.1. Puoi trovare il mio codice in fondo.

Tuttavia, quando imposto il nuovo useHistory dal reagente-router, ottengo questo errore:

Uncaught TypeError: Cannot read property 'history' of undefined

che è causato da questa linea in 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 !!!!!!!!!!!!!!!!!
}

Poiché è correlato a useContext e forse è in conflitto un conflitto con il contesto, ho provato a rimuovere completamente tutte le chiamate a useContext, creando il provider, ecc. Tuttavia, ciò non ha fatto nulla. Provato con React v16.8; stessa cosa. Non ho idea di cosa potrebbe causare questo, poiché ogni altra funzionalità del router React funziona bene.

*** Si noti che la stessa cosa accade quando si chiamano gli altri hook del router React, come useLocation o useParams.

Qualcun altro ha riscontrato questo? Qualche idea su cosa potrebbe causare questo? Qualsiasi aiuto sarebbe molto apprezzato, in quanto non ho trovato nulla sul web relativo a questo 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>
    )
}

È perché il contesto di reazione-router non è impostato in quel componente. Dal momento che è il <Router>componente che imposta il contesto è possibile utilizzare useHistoryin un sottocomponente, ma non in quello.

Nota ad altre persone che si imbattono in questo problema e hanno già avvolto il componente con il componente Router. Assicurarsi che il router e il hook useHistory siano importati dallo stesso pacchetto. Lo stesso errore può essere generato quando uno di essi viene importato da reagire-router e l'altro da reagire-router-dom e le versioni del pacchetto di quei pacchetti non corrispondono. Non usarli entrambi, leggi qui la differenza .

Ho aggiornato il mio react-router-domda 5.0.0 a ^ 5.1.2 ed è stato risolto. È possibile notare che si useHistorytrova in un sottocomponente.