Die Eigenschaft 'history' von undefined kann nicht gelesen werden (useHistory-Hook von React Router 5)

Ich verwende den neuen useHistory-Hook von React Router, der vor einigen Wochen herauskam. Meine React-Router-Version ist 5.1.2. Meine Reaktion ist in Version 16.10.1. Sie finden meinen Code unten.

Wenn ich jedoch die neue useHistory vom React-Router importiere, wird folgende Fehlermeldung angezeigt:

Uncaught TypeError: Cannot read property 'history' of undefined

was durch diese Zeile im React-Router verursacht wird

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

Da es sich um useContext handelt und möglicherweise ein Konflikt mit dem Kontext vorliegt, habe ich versucht, alle Aufrufe von useContext vollständig zu entfernen, den Provider zu erstellen usw. Dies hat jedoch nichts bewirkt. Versucht mit React v16.8; gleiche Sache. Ich habe keine Ahnung, was dies verursachen könnte, da alle anderen Funktionen des React-Routers einwandfrei funktionieren.

*** Beachten Sie, dass dasselbe beim Aufrufen der anderen React-Router-Hooks wie useLocation oder useParams passiert.

Hat das noch jemand erlebt? Irgendwelche Ideen, was dies verursachen könnte? Jede Hilfe wäre sehr dankbar, da ich im Internet nichts zu diesem Thema gefunden habe.

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

Dies liegt daran, dass der React-Router-Kontext in dieser Komponente nicht festgelegt ist. Da es die <Router>Komponente ist, die den Kontext festlegt, den Sie useHistoryin einer Unterkomponente verwenden können, aber nicht in dieser.

Hinweis für andere Personen, die auf dieses Problem stoßen und die Komponente bereits mit der Routerkomponente umwickelt haben. Stellen Sie sicher, dass der Router und der useHistory-Hook aus demselben Paket importiert werden. Der gleiche Fehler kann ausgelöst werden, wenn einer von ihnen vom React-Router und der andere vom React-Router-Dom importiert wird und die Paketversionen dieser Pakete nicht übereinstimmen. Sie nicht beide verwenden, lesen Sie über den Unterschied hier .

Ich habe mein react-router-domvon 5.0.0 auf ^ 5.1.2 aktualisiert und es wurde gelöst. Möglicherweise stellen Sie fest, dass sich das useHistoryin einer Unterkomponente befindet.